Change class property by using jquery

Question

I would like to add a property directly to a class instead of objects that have given class.

It should work for dynamically added elements as well.

I tried to do it by using $(".myElement").css("background", "green"); but it works only for already existing elements, the new elements are created with default class properties.

My code is:

<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>    
        <style>
            .myElement{
                width: 20px;
                height: 20px;
                background: red;
                margin: 5px;
            }
        </style>        
    </head>
        
    <body>
        <div id="elementsContainer">
            <div class="myElement"></div>
            <div class="myElement"></div>
        </div>
        <button id="addClassProperty">Add class property</button>
        <button id="addNewElement">Add new element</button>
        
        <script>
            $("#addClassProperty").click(function(){
                $(".myElement").css("background", "green");
            });
            
            $("#addNewElement").click(function(){
                $("#elementsContainer").append("<div class='myElement'></div>");
            });
        </script>
    </body> 

</html>

The expected result should add a new property to all existing element and to every newly created elements without cast change property for newly created element.

Is there any way to solve this problem?

I copied your code into a snippit and each newly added element adds the green style when you click add class... — dale landry, Mar 27 '21 at 18:06
@dalelandry please do the following: 1) add class property, 2) create a new element. The newly added element is red. — Rash J, Mar 27 '21 at 18:11

charlietfl · Accepted Answer · 2021-03-27T18:26:26.460

This is far simpler by adding a class to the parent container and a corresponding css rule for .myElement when that class exists

$("#addClassProperty").click(function() {  
  $('#elementsContainer').addClass('active')
});

$("#addNewElement").click(function() {  
  $("#elementsContainer").append("<div class='myElement'></div>");
});

.myElement {
  width: 20px;
  height: 20px;
  background: red;
  margin: 5px;
}

.active .myElement {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="elementsContainer">
  <div class="myElement"></div>
  <div class="myElement"></div>
</div>
<button id="addClassProperty">Add class property</button>
<button id="addNewElement">Add new element</button>

@freedomn-m I changed mine while you were writing yours and posted it seconds before you did — charlietfl, Mar 27 '21 at 18:29

Laurelg · Answer 2 · 2021-03-27T19:19:17.513

0

Rather than "change class property", you want to change/add a css rule.

EDIT: better link --> Changing a CSS rule-set from Javascript

Or you could have one/multiple classes with existing css and change your objects' classes instead.

edited Mar 27 '21 at 19:19

answered Mar 27 '21 at 18:32

Laurelg

11
3

s.kuznetsov · Answer 3 · 2021-03-27T19:39:35.757

When you apply a green background color to elements, the style of the background color is entered into the style attribute. This is how the css() method works. Therefore, each new element has a background color of red, taken from the css.

To solve your problem, you can use the method with adding a class, or change the color of the background rule in the CSS itself. This can be done using cssRules by referring to the document. Like this:

[...document.styleSheets[0].cssRules].find((currentSel) => (currentSel.selectorText = ".myElement")).style.background = "green";

By placing this code inside the click event of the selector #addClassProperty.

$("#addClassProperty").click(function () {
    [...document.styleSheets[0].cssRules].find((currentSel) => currentSel.selectorText = ".myElement").style.background = "green";
});

$("#addNewElement").click(function () {
    $("#elementsContainer").append("<div class='myElement'></div>");
});

.myElement {
    width: 20px;
    height: 20px;
    background: red;
    margin: 5px;
}

<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <style></style>
    </head>

    <body>
        <div id="elementsContainer">
            <div class="myElement"></div>
            <div class="myElement"></div>
        </div>
        <button id="addClassProperty">Add class property</button>
        <button id="addNewElement">Add new element</button>
    </body>
</html>

Change class property by using jquery

3 Answers3