![Garamond]( "Garamond")
这是我的沙箱：https://codepen.io/joondoe/pen/OeQBEb我的问题：我想知道为什么当我从HTML标记中删除CSS属性visibility:visible时，它不会从节点列表中消失。info：当我们按下display_node_list按钮时，将在控制台上调用nodelist。第一个按钮的节点列表将直接显示在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> 最佳答案 HTMLElement.style用于获取（以及设置）元素的内联style。在上面，用<i style="visibility:visible">设置。 获取时，它将返回一个CSSStyleDeclaration对象，该对象包含该元素的所有样式属性的列表，并为该元素的内联style attribute中定义的属性分配了值。如果删除内联样式，JavaScript将无法访问它。请注意，即使在<head>或外部样式表中设置了属性，情况也是如此： style属性对于完全了解应用于元素的样式没有用，因为它仅表示在元素的内联样式属性中设置的CSS声明，而不表示来自其他地方的style规则的CSS声明，例如部分或外部样式表。这意味着如果您设置：i { visibility:visible;}<head>将无法找到它。可以在以下内容中看到：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> 10-07 21:10