CODEWITHSUNDEEP
javascripthtml
Joshua
Joshua

Reputation: 215

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

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?

Upvotes: 2

Views: 2878

Answers (4)

Kornel
Kornel

Reputation: 100100

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

Upvotes: 2

SeanDowney
SeanDowney

Reputation: 17734

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.

Upvotes: 5

Shog9
Shog9

Reputation: 159610

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...

Upvotes: 3

Frank Krueger
Frank Krueger

Reputation: 70983

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.

Upvotes: 0

Related Questions