Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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() ?

share|improve this question
3  
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♦ Jul 26 '12 at 23:54
2  
Do you want it to affect any future elements? Or just those that exist at the time where your code runs? – ThiefMaster♦ Jul 26 '12 at 23:55
@ThiefMaster only when the code runs. I could use Jquery, so things are very simple. thanks! – LINGS Jul 27 '12 at 0:03
@ThiefMaster: IE8 is modern? – squint Jul 27 '12 at 0:08
1  
@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. – squint Jul 27 '12 at 0:10

2 Answers

up vote 5 down vote accepted

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');
share|improve this answer
up vote 2 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.