Question

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?

Answer 1

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 compound 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";
}