setting new class in div

Question

Possible Duplicate:
Change an element's CSS class with JavaScript

I'm trying to set div's attributes with this script. And i have problem in third line, where I'm trying to get div-s from parent div which id is "loading". but here the problem, it seems like there in variable divs is nothing. why's that?

Script:

function  blink() {
    document.getElementById("loading").setAttribute("class","loader");
    var divs = document.getElementById("loading").getElementsByTagName("div");
    alert(divs[0].class);
    for(var i=0;i<divs.length;i++) {
        var _id = divs[i].id;
        document.getElementById(divs[i].id).setAttribute("class", "bar");
    }       
}

html:

<div id="loading" class="loader2">
<a href="#" onClick="blink()">
    <div class="bar_"></div>
    <div class="bar_"></div>
    <div class="bar_"></div></a>
</div>

I want to replace divs class: "bar_" to "bar". that's what I'm trying to do.

You shouldn't use block-elements `
` inside inline-elements `` — Teun Zengerink, Feb 23 '12 at 16:33

Matt Ball · Accepted Answer · 2013-12-23T17:04:43.973

class is a future reserved word in JavaScript. Use className, not class.
As a general rule, use properties, not setAttribute
There's no need to re-get the <div> by ID when you already have them in divs!

So:

function blink() {
    var loader = document.getElementById("loading");
    loader.className = "loader";
    var divs = loader.getElementsByTagName("div");

    for(var i=0; i<divs.length; i++) {
        divs[i].className = "bar";
    }
}

score 0 · Answer 2 · answered Feb 23 '12 at 16:36

Putting a div inside an a tag is not valid html, which doesn't help. But the main problems are that to read the class attribute you need to use el.className. Also, you're trying to read the id attribute for your inner divs when you haven't defined it in the html.

setting new class in div

2 Answers2