Javascript 显示时如何隐藏元素：无不显示'；行不通

事情是这样的。我在试图用类“text”隐藏段落元素时遇到问题。我试过显示：没有，但对我也不起作用

    <style>
    .img {
      position: absolute;
      left: 40%;
      transform: translateX(-50%);
    }
    .p-wrap {
      color: #fff;
      position: relative;  
      display: none;
    }
    .text {   
      display:none;
      color: #000;
      position: absolute;
      left: -130px;
    }
   </style>

  <div class="img">
   <div class="p-wrap">
     <p class="text"> Oh hey Mark</p>
   </div>
  <img
    src="https://source">
 </div>

.img{
位置：绝对位置；
左：40%；
转化：translateX（-50%）；
}
p-wrap{
颜色：#fff；
位置：相对位置；
显示：无；
}
.text{
显示：无；
颜色：#000；
位置：绝对位置；
左：-130px；
}
哦，嘿，马克

使用

可见性：隐藏

.img{
位置：绝对位置；
左：40%；
转化：translateX（-50%）；
}
p-wrap{
颜色：#fff；
位置：相对位置；
显示：无；
}
.text{
可见性：隐藏；
颜色：#000；
位置：绝对位置；
左：-130px；
}

哦，嘿，马克

您在类为

p-wrap的div上遗漏了一个结束引号，因此无法正确生成DOM

<div class="img">
  <div class="p-wrap">
         <p class="text"> Oh hey Mark</p>
  </div>
  <img
    src="https://nypdecider.files.wordpress.com/2018/09/the-room-youtube.jpg?quality=80&strip=all&w=646&h=431&crop=1">
</div>


哦，嘿，马克

这将修复它。
在CSS中隐藏元素有多种方法。您可以通过将“不透明度”设置为0、将“可见性”设置为“隐藏”、将“显示”设置为“无”或为绝对定位设置极值来隐藏它。
你有没有想过为什么我们有这么多隐藏元素的技术，而它们似乎都在做同样的事情？所有这些方法实际上彼此略有不同，这种差异决定了在特定情况下使用哪种方法。本教程将介绍使用上述任何方法隐藏元素时需要记住的细微差别

不透明度

属性“不透明度”用于设置元素的透明度。它的设计目的不是以任何方式改变元素的边界框。这意味着将不透明度设置为零只会在视觉上隐藏元素。元素仍然占据其位置并影响网页的布局。它还将响应用户交互

.hide {
  opacity: 0;
}

可见性

只要初始状态和最终状态具有不同的值，该属性也可以设置动画。这可确保可见性状态之间的过渡可以平滑，而不是突然

.hide {
   visibility: hidden;
}

显示

我们元素的所有后代也将被隐藏。无法设置此属性的动画，因此各种状态之间的转换总是很突然

请注意，元素仍然可以通过DOM访问。您将能够像处理任何其他元素一样对其进行操作

.hide {
   display: none;
}

位置

假设您有一个要与之交互的元素，但不希望它影响web页面的布局。到目前为止，没有任何财产能够妥善处理这种情况。在这种情况下，可以做的一件事是将元素移出视口。这样，它不会影响布局，并且仍然可以执行。以下是实现此目的的CSS：

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

剪辑路径

隐藏元素的另一种方法是剪切它们。以前，这可以通过clip属性来实现，但现在已经不推荐使用clip属性，而是使用名为clip path的更好的属性。Nitish Kumar最近在SitePoint这里引入了clip path属性，因此可以随时查看该属性的更高级用法

请记住，IE或Edge尚未完全支持下面使用的剪辑路径属性。如果将外部SVG文件用于剪辑路径，则支持会受到更大的限制（以下不适用）。用于隐藏元素时的“剪辑路径”特性如下所示：

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

除了从显示：无，其他选择是

可见性：隐藏
不透明度：0
但是要小心，这个元素仍然存在于DOM中（仍然分配了空间）。
缺少封闭样式元素
。有人发布了这个事实，在
class=p-wrap处也有一个缺少引号的符号
class=p-wrap
可能有点晚了，我跟随你链接到你的例子，发布的例子工作得很好。@reporter当时它可能已经被修复了，但为了一个例子，我又把它弄坏了。