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

您可以使用appendTo和css方法

$('<div class="yah">123</div>')
.appendTo(document.body)
.css({border: "2px solid red"});

或使用父html DOM更改事件

$('#parent_id').bind("DOMSubtreeModified",function(){
    if($(".yah").length){
        $(".yah").css({border: "2px solid red"})
    }
})

Answer 2

您可以使用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>

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

2 个答案: