Question

在css中，我已将html中的所有<hr>元素设置为＆＃34; display：none;＆＃34;哪个有效。

我设置了一个onclick事件监听器来更改＆＃34;显示＆＃34;到＆＃34;阻止＆＃34;。

我用：

document.getElementsByTagName("hr").innerHTML.style.display = "block";

我收到错误＆＃34;无法读取属性＆＃39; style＆＃39;未定义＆＃34;。

Answer 1

这在两个方面是不正确的

getElementsByTagName为您提供元素列表，并且没有方法可以对所有元素进行操作，因此您必须遍历所有元素并单独添加所需的样式。
innerHTML返回一个字符串，其中包含元素中的标记，但<hr>中没有任何内容，而style属性位于<hr>属性上1}}本身。
```
var hrs = document.getElementsByTagName("hr");
for(var i = 0; i < hrs.length; i++) {
    hrs[i].style.display = 'block';
}
```

Answer 2

简单（非常有效）的解决方案：

使用class-element

标记您的身体

<body class="no_hr">  <article><hr/> TEXT Foo</article> <hr/> </body>

在css中

不要直接隐藏hr，而是

.no_hr hr {
    display:none;
}

现在在你的css中定义第二种风格

.block_hr hr{
    display:block;
}

在按钮onClick上

，将唯一的身体类别从 no_hr 更改为 block_hr

onclick() {
    if ( document.body.className == "no_hr" ) {
      document.body.className = "block_hr";
    } else {
      document.body.className = "no_hr";
    }        
}

这是一个非常有魅力的解决方案，因为您不必自己迭代元素，而是让您的浏览器优化过程完成它们的工作。

Answer 3

按以下方式进行：

var hrItems = document.getElementsByTagName("hr");

for(var i = 0; i < hrItems.length; i++) {
    hrItems[i].style.display = 'block';
}

Answer 4

对于想要不需要JavaScript的解决方案的人。

在文档顶部创建一个不可见的复选框，并确保人们可以点击它。

<input type="checkbox" id="ruler"/>
<label for="ruler">Click to show or hide the rules</label>

然后告诉样式表默认情况下应隐藏<hr>，但如果选中该复选框则应该可见。

#ruler, hr {display:none}
#ruler:checked ~ hr {display:block}

完成。请参阅fiddle。

Answer 5

getElementsByTagName()返回一个节点列表，因此您必须遍历所有结果。此外，innerHTML标记没有<hr>属性，并且必须直接在标记上设置样式。

我喜欢使用Array.forEach()和call编写这些类型的迭代：

[].forEach.call(document.getElementsByTagName("hr"), function(item) {
  item.style.display = "block";
});

或者，让自己更容易使用jQuery：

$("hr").show();

更改所有<hr /> html元素的属性

5 个答案: