javascript 使用 getElementsByTagName() 更改所有元素的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17349081/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change style of all elements using getElementsByTagName()
提问by pancakes
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.
我对 javascript 还很陌生，一直无法让这段代码工作，我不确定我错过了什么。
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>
So instead of reading 'X Y Z' it will display 'A B C'
因此，它不会读取“XYZ”，而是显示“ABC”
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';
}
}
});
Here is the jsfiddleof my code. I would greatly appropriate some feedback or possible threads that might point me in the right direction.
这是我的代码的jsfiddle。我会非常适合一些可能为我指明正确方向的反馈或可能的线索。
回答by
You're using the HTML5 hiddenattribute, so you should just reverse that property.
您正在使用 HTML5hidden属性，因此您应该反转该属性。
for (var i = 0; i<elems.length; i++) {
elems[i].hidden = !elems[i].hidden;
}
DEMO:http://jsfiddle.net/TEXJp/
演示：http ://jsfiddle.net/TEXJp/
If you were to use the styleobject, 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.
如果您要使用该style对象，那么您需要考虑它只会报告直接在元素上设置的样式。所以你的测试应该是 for== ""而不是== "visible"，或者== "hidden"你是否真的在原始元素上设置了它。
<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";
}
}
回答by raptor
if fixed your code:
如果修复了您的代码：
$(function () {
var elems = document.getElementsByTagName('span');
for (var i = 0; i < elems.length; i++) {
if (elems[i].style.visibility == 'hidden') {
elems[i].style.visibility = 'visibile';
} else {
elems[i].style.visibility = 'hidden';
}
}
});
It was just a missing ;and a }too much
这只是一个缺失;和}太多
回答by Maxime
I changed your code a little bit and now it seems to work.
我稍微更改了您的代码，现在它似乎可以工作了。
<body>
<span style="visibility: hidden;">A</span>
<span>X</span>
<span style="visibility: hidden;">B</span>
<span>Y</span>
<span style="visibility: hidden;">C</span>
<span>Z</span>
</body>
$(function() {
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';
}
}
});
The problem is that you are using the html attribute hidden, but you are modifying the css attribute hidden. I changed your HTML code to set hidden as a css property instead of a HTML property. Also, I switched your if else block and it worked. I think the style.visibility is not initialized until you give it a value. It equals null, not visible.
问题是您正在使用 html 属性hidden，但您正在修改 css 属性hidden。我将您的 HTML 代码更改为将 hidden 设置为 css 属性而不是 HTML 属性。另外，我切换了你的 if else 块并且它起作用了。我认为 style.visibility 在你给它一个值之前不会被初始化。它等于null，不是visible。
回答by recursive
You have a few syntax errors, including an unmatched curly brace, and a comma in your for loop definition instead of a semi-colon.
您有一些语法错误，包括不匹配的花括号和 for 循环定义中的逗号而不是分号。
Also your html refers to the hidden attribute, yet your javascript is flipping the visibility via styles.
此外，您的 html 指的是隐藏属性，但您的 javascript 正在通过样式翻转可见性。
Here is a working fork. http://jsfiddle.net/yPU2T/1/
这是一个工作叉。http://jsfiddle.net/yPU2T/1/
var elems = document.getElementsByTagName('span');
for (var i = 0; i < elems.length; i++) {
elems[i].hidden = !elems[i].hidden;
}
回答by Euphe
You are using jquery, so no need to get elements the way you did it
您正在使用 jquery，因此无需按照您的方式获取元素
$(document).ready(function () {
var elems = $('span.hidden');
elems.hide();
})
