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>

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

1 个答案: