javascript - 将样式属性应用于后续元素的正确方法

Question

如何通过jQuery/javascript给后面的元素添加css属性？

这是我的尝试:但失败了:

// failed
$('.yah').load(function() {
  $(this).css({ border: "2px solid red" });
});

// failed
$('.yah').ready(function() {
  $(this).css({ border: "2px solid red" });
})

setTimeout(function() {
  $('body').append("<div class='yah''>123</div>");
}, 2000);

Answer 1

您可以使用 MutationObserver 并观察 childList 中的变化，当添加特定节点时您可以更改其 css。

var body = document.querySelector('body')

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type == 'childList') {
      mutation.addedNodes.forEach(function(node) {
        node = $(node);
        if (node.hasClass('yah')) node.css({
          'border': '1px solid red'
        })
      })
    }
  });
});

observer.observe(body, {
  childList: true
})

setTimeout(function() {
  body.innerHTML += "<div class='lorem'>123</div>"
}, 1000);

setTimeout(function() {
  body.innerHTML += "<div class='yah'>123</div>"
}, 2000);

setTimeout(function() {
  body.innerHTML += "<div class='ipsum'>123</div>"
}, 2500);

setTimeout(function() {
  body.innerHTML += "<div class='yah'>123</div>"
}, 3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>