使用 getElementsByTagName() 更改所有元素的样式 [英] Change style of all elements using getElementsByTagName()
问题描述
我对 javascript 还很陌生，一直无法让这段代码工作，我不确定是什么以及我缺少什么.
I'm fairly new to javascript and have been unable to get this code to work and I am unsure were and what I'm missing.
这就是我想要它做的.我正在尝试让脚本读取所有内容并切换在正文中找到的跨度的可见性
So here is what I want it to do. I'm trying to have the script read everything and switch the visibility of the span found in the body
<body>
<span hidden>A</span>
<span>X</span>
<span hidden>B</span>
<span>Y</span>
<span hidden>C</span>
<span>Z</span>
</body>
因此，它不会读取X Y Z"，而是显示A B C"
So instead of reading 'X Y Z' it will display 'A B C'
到目前为止我的代码是..
The code I have so far is..
$(function() {
var elems = document.getElementsByTagName('span');
for (var i = 0; i<elems.length; i++) {
if (elems[i].style.visibility == 'visible') {
elems[i].style.visibility = 'hidden';
}
else {
elems[i].style.visibility = 'visible';
}
}
});
这是我的代码的 jsfiddle.我会非常适合一些可能为我指明正确方向的反馈或可能的线索.
Here is the jsfiddle of my code. I would greatly appropriate some feedback or possible threads that might point me in the right direction.
推荐答案
您正在使用 HTML5 hidden 属性，因此您应该反转该属性.
You're using the HTML5 hidden attribute, so you should just reverse that property.
for (var i = 0; i<elems.length; i++) {
elems[i].hidden = !elems[i].hidden;
}
演示: http://jsfiddle.net/TEXJp/
如果您要使用 style 对象，那么您需要考虑它只会报告直接在元素上设置的样式.所以你的测试应该是 == "" 而不是 == "visible"，或者 == "hidden" 如果你真的设置了它在原始元素上.
If you were to use the style object, then you need to consider that it will only report styles that were set directly on the element. So your test should be for == "" instead of == "visible", or for == "hidden" if you actually set it on the original elements.
<span style="visibility:hidden;">H</span>
<span>V</span>
<span style="visibility:hidden;">H</span>
<span>V</span>
var elems = document.getElementsByTagName('span');
for (var i = 0; i < elems.length; i++) {
if (elems[i].style.visibility === "hidden") {
elems[i].style.visibility = "visible";
} else {
elems[i].style.visibility = "hidden";
}
}
演示: http://jsfiddle.net/TEXJp/1/
这篇关于使用 getElementsByTagName() 更改所有元素的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
