Tips for changing the style ID depending on the variable value

Question

Tips for changing the style ID depending on the variable value

Currently, I am exploring the possibility of switching CSS styles using jQuery through a simple if condition. Is there an easy method to switch styles based on IDs? In my case, I have two CSS blocks each with different IDs.

Here is an example:

<style id="styleA">
.myDiv {
    display: none; 
}
</style>

<style id="styleB">
.myDiv {
    display: block; 
}
</style>


<div class="myDiv">Lorem</div>


<script type="text/javascript">

    $(document).ready(function()
    {
        var style = 4;

                if (style < 5)
                {
                    //apply css from styleA
                } 
                else
                {
                    //apply css from styleB
                }
    });
</script>

jquery css

Answer 1

Answer №1

Your code has a multitude of errors that need addressing.

Start by familiarizing yourself with the style tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

The style tag does not use any specific id (aside from generic behavior), but you can utilize the title for alternative styles or employ the scoped attribute and place the style tag within the element requiring formatting.

A more optimal approach would be to define additional classes in a single style tag for the same element. For example:

<style>
.myDiv.hidden {
    display: none; 
}

.myDiv.shown {
    display: block; 
}
</style>

This simplifies the process of switching styles by simply adding or removing class names from elements. Instead of using hidden/shown, consider using class names that include a number from your style variable.

Furthermore, the logic in your if/else block appears to be flawed.

Answer 2

Your code has a multitude of errors that need addressing.

Start by familiarizing yourself with the style tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

The style tag does not use any specific id (aside from generic behavior), but you can utilize the title for alternative styles or employ the scoped attribute and place the style tag within the element requiring formatting.

A more optimal approach would be to define additional classes in a single style tag for the same element. For example:

<style>
.myDiv.hidden {
    display: none; 
}

.myDiv.shown {
    display: block; 
}
</style>

This simplifies the process of switching styles by simply adding or removing class names from elements. Instead of using hidden/shown, consider using class names that include a number from your style variable.

Furthermore, the logic in your if/else block appears to be flawed.

Answer 3

Answer №2

To enhance the styling options, I suggest assigning a specific class to the body element based on the style value:

$('body').addClass('style'+style);

This approach allows for easy customization of styles for different types.
For instance:

body.style4 .myDiv{
    display:none;
}
body.style5 .myDiv{
    display:block;
}

Answer 4

To enhance the styling options, I suggest assigning a specific class to the body element based on the style value:

$('body').addClass('style'+style);

This approach allows for easy customization of styles for different types.
For instance:

body.style4 .myDiv{
    display:none;
}
body.style5 .myDiv{
    display:block;
}

Answer 5

Answer №3

Test out the following code snippet:

<style type="text/css>
    .custom-style1 {
        display: none; 
    }

    .custom-style2 {
        display: block; 
    }
 </style>


    <div id="myCustomDiv" class="">Lorem</div>


    <script type="text/javascript>

        $(document).ready(function()
        {
            var customStyle = 4;

                    if (customStyle < 5)
                    {
                        $('myCustomDiv').addClass('custom-style1').removeClass('custom-style2');
                    } 
                    else
                    {
                        $('myCustomDiv').addClass('custom-style2').removeClass('custom-style1');
                    }
        });
    </script>

Answer 6

Test out the following code snippet:

<style type="text/css>
    .custom-style1 {
        display: none; 
    }

    .custom-style2 {
        display: block; 
    }
 </style>


    <div id="myCustomDiv" class="">Lorem</div>


    <script type="text/javascript>

        $(document).ready(function()
        {
            var customStyle = 4;

                    if (customStyle < 5)
                    {
                        $('myCustomDiv').addClass('custom-style1').removeClass('custom-style2');
                    } 
                    else
                    {
                        $('myCustomDiv').addClass('custom-style2').removeClass('custom-style1');
                    }
        });
    </script>

Tips for changing the style ID depending on the variable value

Answer №1

Answer №2

Answer №3

Similar questions

Troubleshooting problem with divs overlapping in Internet Explorer 7

Bootstraping Twitter with PHP session starting has become a standard practice in modern

Utilizing AJAX to transmit data from an HTML page to a controller in Asp.net

How jQuery Autocomplete handles lowercase conversions in queries

Make a <div> element that has a fixed size, but allows for scrolling text inside

Why is Django not recognizing my ajax request when using the `is_ajax()` function?

The CSS property 'clear:both;' is not functioning properly on IE7 browsers whereas works fine on IE8/IE9, Firefox, Chrome, and other browsers

Prevent IonContent from scrolling to the bottom or top when using Ionic framework

What is the best way to save the city name received from geolocation into a variable and then make an AJAX request?

Can we access an element within the document using its context?

retrieve the value of a text form using jQuery and its corresponding id

Struggles with Managing 5-Digit Unicode Characters with jQuery

Error with the jQuery scrolling plugin

Unwillingness of Ajax to accept Names containing apostrophes as a parameter

Canvg | Is there a way to customize canvas elements while converting from SVG?

Traversing JSON Data using Vanilla JavaScript to dynamically fill a specified amount of articles in an HTML page

jQuery event.preventDefault not functioning as expected

When displaying content within an iframe, toggle the visibility of div elements

Altering documents post Bower installation

Issues with FullCalendar.js failing to consistently fire when used in conjunction with JS/Ajax/ColdFusion