Here is the css:

#content ul {
               font-size: 12px;
           }

I am trying this:

document.getElementById("content ul").style.fontSize = 8px;

But this is not working for me. Can anybody suggest how to do this?

Here is the css:

#content ul {
               font-size: 12px;
           }

I am trying this:

document.getElementById("content ul").style.fontSize = 8px;

But this is not working for me. Can anybody suggest how to do this?

• javascript
• css

3 Answers 3

Two issues:

1. Style properties are strings, so you need "8px" rather than 8px.

2. getElementById gets elements by ID. You're passing in a pound selector (and you're missing the # from it). You'll have to use an ID and then find the children (via getElementsByTagName), or use querySelector (for the first matching element) or querySelectorAll (for all matching elements) instead. (Note that although well-supported in general, some older browsers don't have those last two; details.)

So for instance, here's how you would change the first matching element's font size on browsers with querySelector support:

document.querySelector("#content ul").style.fontSize = "8px";

Or all of them

var list = document.querySelectorAll("#content ul");
var index;
for (index = 0; index < list.length; ++index) {
    list[index].style.fontSize = "8px";
}

Or on older browsers:

var content = document.getElementById("content");
var list = content.getElementsByTagName("ul");
var index;
for (index = 0; index < list.length; ++index) {
    list[index].style.fontSize = "8px";
}

You need to select them properly. First you need to get the element that contains the <ul> in question.

var contentArea = document.getElementById("content");

Then you need to get the appropriate tags by tagname:

var tags = contentArea.getElementsByTagName("ul");

Then cycle through them to set the font size:

for (i=0; i<tags.length, i++)
{
    tags[i].style.fontSize = "8px"; // Don't forget the " here
}

<ul>'s are elements, not id's. Get the content element by id first. Then get child nodes inside that are unordered lists. Finally iterate over the list and change the size. And as TJ said, you need to pass in a string.

var lists = document.getElementById('content').getElementsByTagName('ul');
for (var i; i < lists.length; i++ ) {
     lists[i].style.fontSize = '8px';
}