javascript - 动态附加元素后重新应用样式属性

Question

在我的页面上，如果我更改一个元素的属性，例如

<div class="showInitially"></div>

通过设置

$(".showInitially").hide()

然后之后动态添加的任何元素，如

container.append("<div class='showInitially'>text</div>");

不继承更改。

我知道我可以在添加另一个元素后重新应用所有更改，但不知何故，这似乎效率低下且不可靠，尤其是在对样式进行了大量更改的情况下。那么，是否有另一种方法可以将元素添加到页面，从而自动应用继承的样式和属性更改？

我试过了

container.trigger("create");

但这没有任何作用。下面的代码片段中显示了一个示例:

var container=$("#container");
var buttons = $("button")
var allDivs = $("#container .showInitially")

buttons.on("click", function(){
  buttons.addClass("alt");
  allDivs.addClass("alt");
  allDivs.hide();
  addButton();
})

function addButton(){
	container.append("<div><button>Change another color</button></div> <div class='showInitially'>text</div>");
}

body {
  background: #cccccc;
  padding: 20px;
  font-family: Helvetica;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

div{
  color:black;
}

.alt{
  background: red;
}

.showInitially{
  color:orange;
  display:inline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" >
  <button>Change color</button> <div class="showInitially">text</div>
</div>

Answer 1

动态修改CSS规则。

从 How do you read CSS rule values with JavaScript? 公然抄袭和 modify a css rule object with javascript然后拼凑起来。

您的代码的部分问题在于您的点击操作仅将点击处理程序附加到已经存在的按钮上。任何新按钮都不会获得点击处理程序，因此我将处理程序移至文档并添加了一个选择器。

var container=$("#container");
var buttons = $("button")
var allDivs = $("#container .showInitially")

$(document).on("click", "button", function(){
  buttons.addClass("alt");
  allDivs.addClass("alt");
  modStyle('.showInitially', 'display', 'none');
  //allDivs.hide();
  addButton();
})

function addButton(){
	container.append("<div><button>Change another color</button></div> <div class='showInitially'>text</div>");
}

function modStyle(className, foo, bar) {
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var x = 0; x < classes.length; x++) {
        if (classes[x].selectorText == className) {
            (classes[x].cssText) ? classes[x].style[foo] = bar : classes[x].style[foo] = bar;
        }
    }
}

body {
  background: #cccccc;
  padding: 20px;
  font-family: Helvetica;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

div{
  color:black;
}

.alt{
  background: red;
}

.showInitially{
  color:orange;
  display:inline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" >
  <button>Change color</button> <div class="showInitially">text</div>
</div>