How to replace class name for element without ID?

Question

Pure JS please: Hi, This thread: How to Get Element By Class in JavaScript? contains the starting point for my question. How can I replace the class name itself? I just can't seem to get it to work using examples in the link above. Here's my jsFiddle:

Thanks a lot!

<div class="ggg">blavlavbla </div>

function replaceClass()
{
   var plusLinks = document.querySelectorAll('ggg');
   var firstLink = plusLinks[0];
   firstLink.setAttribute('class', 'aw-top-content-mod');
}

replaceClass();

possible duplicate of [Change an element's CSS class with JavaScript](http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript) — El Yobo, Oct 01 '14 at 04:53
@ElYobo It's not really a duplicate of that. His problem isn't really with changing the class, it's with the selector to find the elements in the first place. — Barmar, Oct 01 '14 at 04:56
I suggest rewriting your question; the class changing part is a duplicate, your question is then "how do I get an element without an ID". — El Yobo, Oct 01 '14 at 05:28

score 1 · Answer 1 · answered Oct 01 '14 at 04:54

1

Just add . to the class name:

   function replaceClass()
             {
                 var plusLinks = document.querySelectorAll('.ggg');
                 var firstLink = plusLinks[0];
                 firstLink.setAttribute('class', 'aw-top-content-mod');
             }
     replaceClass();

JSFiddle

answered Oct 01 '14 at 04:54

dev7

6,259
6
32
65

@AdiSolar sure! btw always check your console/browser developer tools when things go wrong. In this case you would see `firstLink` is `undefined` when using `ggg` and not `.ggg` – dev7 Oct 01 '14 at 05:13
I have a widget that is started via a link to a script in the cloud. This script creates div elements etc. on the page. And that comes with css properties defined with "!important". So essentially, I'm trying to override the class that's being created on the fly. Problem is, I don't seem to "catch" it on the page because it takes the widget script time to "draw" the elements and by that time my own script has already finished and of course it doesn't find the element. Is there a way to tell my script to run when the other is finished besides placing it below the widget script call? – Adi Solar Oct 01 '14 at 05:48
Yes, you could call your function only after page finishes loading by listening to the `document.ready` event or you could simply use `setTimeout` and run your code in delay. – dev7 Oct 01 '14 at 05:59

score 0 · Answer 2 · answered Oct 01 '14 at 04:54

You can use getElementsByClassName instead of querySelectorAll which has more browser support. You can do it like.

function replaceClass()
{
    var firstLink = document.getElementsByClassName('ggg')[0];
    firstLink.setAttribute('class', 'aw-top-content-mod');
}
        
 replaceClass();

.aw-top-content-mod
{
    color:red;
}

<div class="ggg">blavlavbla </div>

How to replace class name for element without ID?

2 Answers2