Using a JavaScript variable to control multiple CSS classes

Question

Using a JavaScript variable to control multiple CSS classes

Is there a way to assign multiple CSS classes to an HTML element, including one regular class and one or more JavaScript variables as classes?

I attempted to do this by adding it in as a typical script:

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

However, I came across a suggestion recommending the following method:

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

But I have a feeling that approach would only accommodate one class.

Any thoughts on how to achieve this? Thank you in advance.

javascript html css

Answer 1

Answer №1

Try utilizing setAttribute

const targetElement = document.getElementById('myTarget');
targetElement.setAttribute('class','newClass1 newClass2');

View the results here

Answer 2

Try utilizing setAttribute

const targetElement = document.getElementById('myTarget');
targetElement.setAttribute('class','newClass1 newClass2');

View the results here

Answer 3

Answer №2

Incorporating script elements into html attributes to insert data processed by dynamically assessed code is not a feasible practice.

Instead, a more suitable approach would be to utilize the following template:

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

<!-- ... -->

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

    //...

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

</script>

You can avoid depending on IDs and instead reference existing css classes:

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

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

Answer 4

Incorporating script elements into html attributes to insert data processed by dynamically assessed code is not a feasible practice.

Instead, a more suitable approach would be to utilize the following template:

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

<!-- ... -->

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

    //...

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

</script>

You can avoid depending on IDs and instead reference existing css classes:

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

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

Using a JavaScript variable to control multiple CSS classes

Answer №1

Answer №2

Similar questions

Guide on using selenium webdriver (python) to choose, replicate, and insert all content within an element

Mastering the incorporation of Jquery $.Ajax within AngularJS

Implementing jQuery function to hide or show content upon page load

What is causing my array of objects to constantly accumulate undefined elements?

Utilizing KnockoutJS to Apply CSS Binding Based on Dropdown Selection

How can I get rid of the table borders and set colors for every other row in the

Using AJAX to send a request to a PHP file that populates a popover, but the functionality only works

Generating a default template for an Angular ag-Grid cell with a custom field name - how to do it?

"Customized Bootstrap button featuring a tooltip and modal, experiencing incorrect padding within the button group design

Execute a jQuery ajax request to a specific variable

AngularJS Validation does not verify the step limitation of an HTML number input field

Determine the total character count in every paragraph

When viewed on mobile browsers, the side-by-side divs in a tabbed layout appear to be

How come the values in my object remain inaccessible even after assigning values to it with navigator.geolocation.getCurrentPosition() and returning it?

The effectiveness of border-radius is limited to only one side of the div

the new adjustment has not taken effect on index.php

Sending an object to a Vue 2 component and confirming its validity

What is the best way to locate a specific button in jQuery?

Using jQuery to eliminate selected item from a list

Tips for implementing a confirmation dialogue box prior to submitting a form: