Change CSS with javascript using getElementById

Question

I do not know how to access a specific CSS using javascript.

Let us say,

#menu { color: red; }

can be accessed by

document.getElementById('menu').style.color = "blue";

But I want to access

#menu li a { height: 10%; }

How do I access that using document.getElementById() ?

Is jQuery an option? If yes: $('#menu li a').css('height', '10%'); Otherwise the necessary DOM traversal is much more complicated unless you only want to support modern browsers which have the querySelectorAll method. — ThiefMaster
– ThiefMaster, Commented Jul 26, 2012 at 23:54
Do you want it to affect any future elements? Or just those that exist at the time where your code runs? — ThiefMaster
– ThiefMaster, Commented Jul 26, 2012 at 23:55
@ThiefMaster only when the code runs. I could use Jquery, so things are very simple. thanks! — LINGS
– LINGS, Commented Jul 27, 2012 at 0:03
@LINGS: If you don't have much JavaScript on your page, there's a very good chance that loading jQuery will be overkill. The jQuery zealots rarely mention that. — user1106925
– user1106925, Commented Jul 27, 2012 at 0:10

Michael Berkowski · Accepted Answer · 2012-07-27 00:03:12Z

14

Plain JavaScript solution:

You cannot use getElementById() in this case since its purpose is only to query id attributes, but you can use getElementsByTagName() in context of #menu:

var m = document.getElementById('menu');
// Get all <li> children of #menu
var lis = m.getElementsByTagName('li');
// Loop over them
for (var i=0; i<lis.length; i++) {
  // Get all <a> children of each <li>
  var atags = lis[i].getElementsByTagName('a');
  for (var a = 0; a<atags.length; a++) {
    // And set their color in a loop.
    atags[a].style.color = 'blue';
    // or change some other property
    atags[a].style.height = '25%'; 
  }
}

jQuery Solution:

If you are able to use jQuery, this becomes exceedingly simpler:

$('#menu li a').css('color', 'blue');

edited Jul 27, 2012 at 0:03

answered Jul 26, 2012 at 23:55

Michael Berkowski

271k47 gold badges450 silver badges395 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pointy · Accepted Answer · 2012-07-26 23:54:09Z

3

You don't; you'd have to find all the <a> tags that matched that criteria.

The .getElementById() function is about getting an element by a unique "id" string. If you need to get elements otherwise, there are other APIs to use: .getElementsByTagName(), .getElementsByClass(), .querySelectorAll(), etc. Browser support varies, and even .getElementById() is different between IE and other browsers.

answered Jul 26, 2012 at 23:54

Pointy

415k62 gold badges600 silver badges631 bronze badges

Collectives™ on Stack Overflow

Change CSS with javascript using getElementById

2 Answers 2

Plain JavaScript solution:

jQuery Solution:

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Plain JavaScript solution:

jQuery Solution:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related