Javascript - Applying class to an HTML tag given an attribute/value

Question

I am trying to apply styles to HTML tags dynamically by reading in the value of certain HTML attributes and applying a class name based on their values. For instance, if I have:

<p height="30">

I want to apply a class="h30" to that paragraph so that I can style it in my style sheet. I can't find any information on getting the value of an attribute that is not an id or class. Help?

Answer 1

Attributes are just properties (usually). So just try:

for (e in ...) {
    if (e.height == 30) {
        e.className = "h30";
    }
}

Or use something like jquery to simplify this kind of stuff.

Answer 2

See: getAttribute(). Parameter is the name of the attribute (case insensitive). Return value is the value of the attribute (a string).

Be sure to see the Remarks in MSDN before dealing with IE...

Answer 3

I would highly recommend using something like jquery where adding classes is trivial:

$("#someId").addClass("newClass");

so in your case:

$("p[height='30']").addClass("h30");

so this selects all paragraph tags where the height attribute is 30 and adds the class h30 to it.

Answer 4

It's better to separate layout and presentation.

Despite using CSS, you're tying these two together. Use better class names (why does it have to have 30px height? Is it menubar? footer? banner?)