Mutiple css classes with a javascript variable

Question

How would I set mulitple CSS classes for an HTML element, with at least one normal class and one or more Javascript variables as classes?

Here's how I tried to do it, putting it in like a normal script:

<div class="style-a <script type="text/javascript">style-b</script>">

Then I saw that someone recommend this:

<div onload="this.class=style-a;">

But I'm pretty sure that would only work for one class.

Thoughts? Thanks in advance.

I'm pretty sure this.class wouldn't work for any classes, as it's this.className. In newer browser you can use this.classList.add('style-a'). — adeneo
– adeneo, Commented Apr 24, 2015 at 14:27
Have you tried separating the class names with a space to get multiple class names? Something like this.class='style-a class2'? — Patrick548
– Patrick548, Commented Apr 24, 2015 at 14:37
Neither of the above solutions worked for me. Thanks anyway. — Alex Slack
– Alex Slack, Commented Apr 24, 2015 at 15:09

AmmarCSE · Accepted Answer · 2015-04-24 14:30:18Z

2

Use setAttribute

var element = document.getElementById('myDiv');
element.setAttribute('class','class1 class2');

See it in action

answered Apr 24, 2015 at 14:30

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

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

Comments

collapsar · Accepted Answer · 2015-04-24 14:55:52Z

0

You cannot insert script elements in html attributes to insert data computed by dynamically evaluated code.

Instead you might apply the following template:

<div id="#dyn-styles-1" class="style-a">
    <!-- div contents -->
</div>

<!-- ... -->

<script>
    //
    // Beware:
    //  - Execute _after_ the complete DOM has been built ( use handlers for `load` or `DOMContentLoaded` events)
    //  - Proof of concept only: coding style not recommended for production code
    //
    var js_var_containing_class = "style-b";

    //...

    document.getElementById("dyn-styles-1").className = document.getElementById("dyn-styles-1").className + " " + js_var_containing_class;

</script>

You need not rely on IDs but may refer to existing css classes instead:

var el = document.getElementsByClassName("style-a");

for (var i=0; i< el.length; i++) {
    el[i].className = el[i].className + " " + js_var_containing_class;
}

edited Apr 24, 2015 at 14:55

answered Apr 24, 2015 at 14:33

collapsar

17.4k5 gold badges40 silver badges66 bronze badges

1 Comment

Alex Slack Over a year ago

I tried this, but for some reason the class stays "style-a". Not sure why. Thanks though.

Collectives™ on Stack Overflow

Mutiple css classes with a javascript variable

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related