0

我有一些在运行时使用 javascript 以编程方式生成的 html。

我希望能够动态更改此 html 的 css 属性，例如

  $(".pointsbox").css("background-color","green");

但它似乎不起作用，因为在调用 css 更改时这些 html 元素不可用。

我很确定我以前已经设法做到这一点，但我忘记了该函数的名称。

非常感谢任何帮助！

4

3 回答 3

1

您尚未发布有关如何准确创建 HTML 元素的代码，但它可以像这样简单：

您可以通过将 HTML 传递给 jQuery 函数来创建 HTML 元素，对吗？

var new_element = $('<div>');

好吧，您可以像对待任何其他 jQuery 对象一样对待它，然后就地操作它的 CSS。

var new_element = $('<div>').css('background-color', 'green');

哎呀，您甚至可以在一次调用中链接create、css 更改和DOM insert 。

var new_element = $('<div>')
                      .css('background-color', 'green')
                      .appendTo('#container')
                      ;
于 2012-06-28T12:27:41.230 回答
1

您可以将事件处理程序绑定到Mutation 事件- 特别是事件。但是，正如我链接的页面所述，建议您不要这样做，因为它对您的页面性能有严重的负面影响，并且跨浏览器支持不是特别好。DOMNodeInserted

另一种方法是使用自定义事件模拟您自己DOMNodeInserted的事件。本质上，您为文档上的自定义事件（例如 ）绑定一个处理程序nodeinserted，然后在您有动态修改页面结构的代码时触发该事件。代码可能如下所示：

$(document).on('nodeinserted', function() {
    $('.pointsbox').css('background-color', 'green');
});

function modifyPage() {
    // code to modify your page here
    $(document).trigger('nodeinserted');
}

Note that, with this approach, you'll need to modify all functions that add elements to the page to trigger that nodeinserted custom event.

于 2012-06-28T12:44:30.063 回答
0

我用这个。它确保 DOM 已加载。

$(document).ready(function(){
    //code here 
    $(".pointsbox").css("background-color","green");
});
于 2012-06-28T12:10:37.150 回答