Question

这是我的沙箱：np.logical_and

我的问题：我想知道为什么当我从HTML标记中删除CSS属性visibility:visible时，它从节点列表中消失了。

信息：当我们按下display_node_list按钮时，会在控制台上调用节点列表。第一个按钮的节点列表将直接显示在visibility:style的条目中。如果您在HTML标记中删除了内联样式，则“可见”元数据将消失。我想知道为什么会出现这种现象。

这是我的摘录：

function toggleFontName(){ 
  let fontNameStock= Array.from(document.querySelectorAll("i")) 
  console.log("typeof fontNameStock[0].style.visibility: ", fontNameStock[0].style.visibility) 
}

@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Amatic+SC|Caveat|Cormorant+Garamond|Courgette|EB+Garamond|Faster+One|Glass+Antiqua|Gloria+Hallelujah|Inconsolata|Inknut+Antiqua|Megrim|Patua+One|Permanent+Marker|Raleway+Dots|Rationale|Roboto|Roboto+Condensed|Russo+One|Rye|Satisfy|Shadows+Into+Light|Sue+Ellen+Francisco|Unna|Vast+Shadow&display=swap');

button{
  font-size: 12px; 
  position:fixed;
  left: 15px;
  top:40%;
}

button:hover{
  cursor:pointer;
}

i{
  visibility:visible;
} 

h2{
  padding:0;
  margin-bottom:1em;
}
.content{
  width:50%;
  margin:auto;
  margin-bottom:10vh;
}

hr{
  color:rgb(186, 186, 186);
  margin-bottom: 35px;
}

.Cormorant_Garamond{
  font-family:"Cormorant Garamond";
}

.EB_Garamond{
  font-family:"EB Garamond"
}

<button onclick="toggleFontName()">display_node_list</button>
<div class="content Cormorant_Garamond" >
  <i style="visibility:visible">Cormorant Garamond</i><br/>
  <br/>
   <h2> <b>Design for the audience</b> </h2>
</div>

<hr size="1px" width="35%" noshade>

<div class="content EB_Garamond" >
   <i>EB Garamond</i><br/>
  <br/>
   <h2> <b>Design for the audience</b> </h2>
</div>

<hr size="1px" width="35%" noshade>

Answer 1

HTMLElement.style 用于获取（以及设置）元素的内联 style。

在上面，这是用<i style="visibility:visible">设置的。

获取时，它返回一个CSSStyleDeclaration对象，该对象包含该元素的所有样式属性的列表，并为元素的内联style attribute中定义的属性分配了值。

如果删除内联样式，JavaScript将无法访问它。请注意，即使该属性是在<head>或外部样式表中设置的，也是如此：

style属性对于完全学习应用于元素的样式没有用，因为它仅表示元素的内联样式属性中设置的CSS声明，而不表示来自其他地方的style规则的CSS声明，例如<head>部分或外部样式表中的样式规则。

这意味着如果您设置：

i {
  visibility:visible;
}

HTMLElement.style将找不到它。

这可以在下面看到：

function toggleFontName(){ 
  let fontNameStock= Array.from(document.querySelectorAll("i")) 
  console.log("typeof fontNameStock[0].style.visibility: ", fontNameStock[0].style.visibility) 
}

@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Amatic+SC|Caveat|Cormorant+Garamond|Courgette|EB+Garamond|Faster+One|Glass+Antiqua|Gloria+Hallelujah|Inconsolata|Inknut+Antiqua|Megrim|Patua+One|Permanent+Marker|Raleway+Dots|Rationale|Roboto|Roboto+Condensed|Russo+One|Rye|Satisfy|Shadows+Into+Light|Sue+Ellen+Francisco|Unna|Vast+Shadow&display=swap');

button{
  font-size: 12px; 
  position:fixed;
  left: 15px;
  top:40%;
}

button:hover{
  cursor:pointer;
}

i{
  visibility:visible;
} 

h2{
  padding:0;
  margin-bottom:1em;
}
.content{
  width:50%;
  margin:auto;
  margin-bottom:10vh;
}

hr{
  color:rgb(186, 186, 186);
  margin-bottom: 35px;
}

.Cormorant_Garamond{
  font-family:"Cormorant Garamond";
}

.EB_Garamond{
  font-family:"EB Garamond"
}

<button onclick="toggleFontName()">display_node_list</button>
<div class="content Cormorant_Garamond" >
  <i>Cormorant Garamond</i><br/>
  <br/>
   <h2> <b>Design for the audience</b> </h2>
</div>

<hr size="1px" width="35%" noshade>

<div class="content EB_Garamond" >
   <i>EB Garamond</i><br/>
  <br/>
   <h2> <b>Design for the audience</b> </h2>
</div>

<hr size="1px" width="35%" noshade>

为什么仅当我直接在HTML中输入CSS样式“ visibility：visible”时，它才出现在我的节点列表中？

1 个答案: