Change style of all elements using getElementsByTagName()

问题

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>

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';
        }
    }

});

Here is the jsfiddle of my code. I would greatly appropriate some feedback or possible threads that might point me in the right direction.

回答1:

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;
}

DEMO: http://jsfiddle.net/TEXJp/

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";
    }
}

DEMO: http://jsfiddle.net/TEXJp/1/

回答2:

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

回答3:

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.

回答4:

You have a few syntax errors, including an unmatched curly brace, and a comma in your for loop definition instead of a semi-colon.

Also your html refers to the hidden attribute, yet your javascript is flipping the visibility via styles.

Here is a working fork. http://jsfiddle.net/yPU2T/1/

var elems = document.getElementsByTagName('span');

for (var i = 0; i < elems.length; i++) {
    elems[i].hidden = !elems[i].hidden;
}

回答5:

You are using jquery, so no need to get elements the way you did it

    $(document).ready(function () {
    var elems = $('span.hidden');
    elems.hide();


})

来源：https://stackoverflow.com/questions/17349081/change-style-of-all-elements-using-getelementsbytagname

标签

javascript

styles

visibility

getelementsbytagname