Using javascript to set an HTML class name

Question

Is it possible to put a javascript function call in place of a HTML class name so that the class can be set based upon the results of the function? For example, something like:

<a class="fSetClass(vName)" ....

which would call a function named fSetClass() and receive back a valid CSS class name based upon the parameter vName passed with it.

Thanks

And that class name would be set once in the initialization of the page? Then PHP/C#/... — Šime Vidas
– Šime Vidas, Commented Jan 5, 2012 at 20:28
No, but you can use JavaScript to change the classname of an element, (though you can't do something like class="fSetClass()" and expect it to work. This is more of the PHP realm really, not JavaScript. — Madara's Ghost
– Madara's Ghost, Commented Jan 5, 2012 at 20:28
do you mean like addClass() or removeClass() functions of jquery? — denolk
– denolk, Commented Jan 5, 2012 at 20:28

scottheckel · Accepted Answer · 2012-01-05 20:29:39Z

1

No, it's not possible to do what you're asking from within the HTML. Though, you can use JavaScript to add the class to it afterward.

answered Jan 5, 2012 at 20:29

scottheckel

9,2741 gold badge37 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

skadermen · Accepted Answer · 2012-01-05 20:51:29Z

1

Smth like this, if in short way
document.onload = function(){ document.getElementById('your-element-id').className = fSetClass(vname); }

answered Jan 5, 2012 at 20:51

skadermen

586 bronze badges

Comments

evasilchenko · Accepted Answer · 2012-01-05 20:31:32Z

0

No but what you can do is use jquery to get the item and then add or remove class names from it:

HTML

<div class="my-class">My Content</div>

jQuery

// will produce <div class="my-class added-class">My Content</div>

var addClass = 1;

if(addClass == 1) {
    $(".my-class").addClass("added-class");
}
else
{
    $(".my-class").removeClass("removed-class");
}

answered Jan 5, 2012 at 20:31

evasilchenko

1,8721 gold badge13 silver badges27 bronze badges

Comments

Felix Kling · Accepted Answer · 2012-01-05 20:34:40Z

0

Only the on* event handler attributes are evaluated as JavaScript code, the other attributes are not.

As already said, you have to assign the class normally with JavaScript. Assuming you have a reference to the element (element), you have to assign the class to the className ^[MDN] property:

element.className = fSetClass(vname);

answered Jan 5, 2012 at 20:34

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Comments

rahool · Accepted Answer · 2012-01-05 20:51:05Z

0

If you use jquery, you can set the class by using .attr():

$(document).ready(function() {
  function fSetClass(vName){
     $("#element_id").attr('class', vName);
  }

  fSetClass('className');

});

edited Jan 5, 2012 at 20:51

answered Jan 5, 2012 at 20:38

rahool

6394 silver badges6 bronze badges

Comments

Mark Shust at M.academy · Accepted Answer · 2012-01-05 20:39:29Z

-1

If you use jQuery, you can use the addClass function

$(element).addClass('add-this-class');

If you want to set the class instead, use attr:

$(element).attr('class','add-this-class');

edited Jan 5, 2012 at 20:39

answered Jan 5, 2012 at 20:28

Mark Shust at M.academy

6,4494 gold badges35 silver badges52 bronze badges

2 Comments

Felix Kling Over a year ago

And what if he is not using jQuery?

hugomg Over a year ago

adding a class != setting a class

Collectives™ on Stack Overflow

Using javascript to set an HTML class name

6 Answers 6

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related