Inject CSS values dynamically

Question

Inject CSS values dynamically

I am currently working on dynamically setting the color of a div.

To provide some context, let's examine the following:

<!doctype html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="shape" id="shape1"></div>
    <div class="shape" id="shape2"></div>
    <div class="shape" id="shape3"></div>
</body>
</html>

Here is the CSS code I have implemented:

.shape {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: #dfd;
  margin: 20px;
}

I am exploring if it's feasible to use class="shape-fdd" in the HTML to display a light red color, and using class="shape-dfd" for a light green color.

I have briefly researched LESS, but I'm uncertain if it supports this functionality.

I prefer not to rely on jQuery for a solution. Instead, I am looking for options within CSS or utilizing LESS or SASS if applicable.

Any assistance or guidance would be greatly appreciated.

jquery html css dynamic less

Answer 1

Answer №1

To create a dynamic effect using jquery and two different classes, follow this code snippet:

HTML

<!doctype html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="shape-dfd" id="shape1"></div>
    <div class="shape-dfd" id="shape2"></div>
    <div class="shape-dfd" id="shape3"></div>
    <input type="button" id="classDfd" value="Add dfd class" />
    <input type="button" id="classFdd" value="Add fdd class" />
</body>
</html>

Style

.shape-dfd {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: #dfd;
  margin: 20px;
}
.shape-fdd {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: #fdd;
  margin: 20px;
}
</style>

Jquery

<script>
$(document).ready(function () {

   $("#classDfd").click(function(){

       $("div[id^='shape']").removeClass("shape-fdd");
       $("div[id^='shape']").addClass("shape-dfd");
   });

   $("#classFdd").click(function(){

       $("div[id^='shape']").removeClass("shape-dfd");
       $("div[id^='shape']").addClass("shape-fdd");
   });
});
</script>

Answer 2

To create a dynamic effect using jquery and two different classes, follow this code snippet:

HTML

<!doctype html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="shape-dfd" id="shape1"></div>
    <div class="shape-dfd" id="shape2"></div>
    <div class="shape-dfd" id="shape3"></div>
    <input type="button" id="classDfd" value="Add dfd class" />
    <input type="button" id="classFdd" value="Add fdd class" />
</body>
</html>

Style

.shape-dfd {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: #dfd;
  margin: 20px;
}
.shape-fdd {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: #fdd;
  margin: 20px;
}
</style>

Jquery

<script>
$(document).ready(function () {

   $("#classDfd").click(function(){

       $("div[id^='shape']").removeClass("shape-fdd");
       $("div[id^='shape']").addClass("shape-dfd");
   });

   $("#classFdd").click(function(){

       $("div[id^='shape']").removeClass("shape-dfd");
       $("div[id^='shape']").addClass("shape-fdd");
   });
});
</script>

Answer 3

Answer №2

[Updated] now that my answer has been approved: I would like to emphasize for future readers that the following method may not work currently: it is not yet supported in css3 (only functional for the content attribute at the moment) :)

Just a quick informational note. Although not currently supported in css3 (only implemented for the content attribute), it might be possible soon:

<!doctype html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="shape" id="shape1" data-color="#fdd"></div>
    <div class="shape" id="shape2" data-color="#fdd"></div>
    <div class="shape" id="shape3" data-color="#fdd"></div>
</body>
</html>


.shape {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: attr(data-color);
  margin: 20px;
}

You can find more information on CSS - Add Color with a data attribute - attr(data-color color)

Answer 4

[Updated] now that my answer has been approved: I would like to emphasize for future readers that the following method may not work currently: it is not yet supported in css3 (only functional for the content attribute at the moment) :)

Just a quick informational note. Although not currently supported in css3 (only implemented for the content attribute), it might be possible soon:

<!doctype html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="shape" id="shape1" data-color="#fdd"></div>
    <div class="shape" id="shape2" data-color="#fdd"></div>
    <div class="shape" id="shape3" data-color="#fdd"></div>
</body>
</html>


.shape {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: attr(data-color);
  margin: 20px;
}

You can find more information on CSS - Add Color with a data attribute - attr(data-color color)

Answer 5

Answer №3

If you want to add a new style to your HTML elements, simply create a new class in your CSS file and then apply it in your HTML code.

.newClass {
    background: #dfd;
}

After defining the .newClass, you can use it by adding class="shape newClass" to apply the background color defined in the .newClass.

Check out the demo on JsFiddle to see it in action.

Answer 6

If you want to add a new style to your HTML elements, simply create a new class in your CSS file and then apply it in your HTML code.

.newClass {
    background: #dfd;
}

After defining the .newClass, you can use it by adding class="shape newClass" to apply the background color defined in the .newClass.

Check out the demo on JsFiddle to see it in action.

Answer 7

Answer №4

If you're looking to dynamically set colors using javascript or jQuery, here's a possible approach. You can define the colors in data-attributes and then specify them in your CSS, or use different classes based on the dynamic requirements.

For example:

[data-color="blue"] {
  background-color: deepskyblue !important;
}

[data-color="red"] {
  background-color: tomato !important;
}

Your HTML would then look like this:

<div class="shape" data-color="blue"></div>
<div class="shape" data-color="red"></div>

Check out the demo on jsfiddle

EDIT If you want to use a mixin or extend in SCSS (or check syntax for LESS), you can create a base class and then extend it with specific colors like so:

.shape {
    background-color: aqua;
    display: inline-block;
    height: 100px;
    width: 100px;
}

.shape-blue {
    @extend .shape;
    background-color: deepskyblue;
}

.shape-red {
    @extend .shape;
    background-color: tomato;
}

See the updated demo on jsfiddle

Answer 8

If you're looking to dynamically set colors using javascript or jQuery, here's a possible approach. You can define the colors in data-attributes and then specify them in your CSS, or use different classes based on the dynamic requirements.

For example:

[data-color="blue"] {
  background-color: deepskyblue !important;
}

[data-color="red"] {
  background-color: tomato !important;
}

Your HTML would then look like this:

<div class="shape" data-color="blue"></div>
<div class="shape" data-color="red"></div>

Check out the demo on jsfiddle

EDIT If you want to use a mixin or extend in SCSS (or check syntax for LESS), you can create a base class and then extend it with specific colors like so:

.shape {
    background-color: aqua;
    display: inline-block;
    height: 100px;
    width: 100px;
}

.shape-blue {
    @extend .shape;
    background-color: deepskyblue;
}

.shape-red {
    @extend .shape;
    background-color: tomato;
}

See the updated demo on jsfiddle

Inject CSS values dynamically

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The text element does not line up with the icons

Adjusting the dimensions of the "overflow avatar" to be consistent with the other avatars displayed in AvatarGroup

What is the process to create a sticky Material UI grid element?

Storing a photo taken with a camera to a local directory on the computer

Adjustable width columns in Flexbox design

Tips for choosing nested elements with basic CSS selectors like nth-of-type or nth-child for Selenium

Looking for a Javascript tool to select provinces graphically?

Move the text to the following line if a horizontal scroll bar is visible using JavaScript/JQuery and CSS styling

Developing components through JavaScript

How to dynamically change video source and play local video with Phonegap using JavaScript

Efficiently adjusting the height of a sticky sidebar

When you hover over the button, a picture will appear

Steps for creating a jQuery function that responds to changes in a text box value

Transfer file content by dragging and dropping it onto a TextArea when an anchor tag is dropped

The overlay of the background image is excessively oversized

What impact does the use of CSS in emails have on various email clients and reading formats?

Learn the easy steps to position an image to the right using FreeMarker

The requested resource lacks the 'Access-Control-Allow-Origin' header in a basic HTML form

Is there a way to alter a form element based on the selected image?

Mastering the art of manipulating Div elements using CSS for the optimal Print View experience