时间戳

首页 > 解决方案 > 使用 jquery 更改类属性

javascript - 使用 jquery 更改类属性

问题描述

我想将属性直接添加到类而不是具有给定类的对象。

它也应该适用于动态添加的元素。

我尝试通过使用来做到这一点，$(".myElement").css("background", "green");但它仅适用于已经存在的元素，新元素是使用默认类属性创建的。

我的代码是：

<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>

预期结果应该为所有现有元素和每个新创建的元素添加一个新属性，而无需进行强制转换change property for newly created element。

有没有办法解决这个问题？

标签： javascripthtmljquerycss

解决方案

.myElement通过向父容器添加一个类以及该类何时存在的相应 css 规则，这要简单得多

$("#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>

推荐阅读