如何动态更改 javascript 在运行时生成的 html 的 css？答案

【问题标题】：How can I dynamically change css for html that is generated by javascript at runtime?如何动态更改 javascript 在运行时生成的 html 的 css？
【发布时间】：2012-06-28 12:05:57
【问题描述】：

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

我希望能够动态改变这个 html 的 css 属性例如

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

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

我很确定我以前已经设法做到这一点，但我忘记了这个函数是什么。

非常感谢任何帮助！

【问题讨论】：

你可能想看看这个答案：stackoverflow.com/a/3164861/441352
我认为这两个问题一点也不相似，尽管措辞有些相似。
他所追求的效果被同一个解决方案覆盖。为未来可能出现的 HTML 添加一些样式。如果有的话，我认为措辞不同，但基本问题是相同的：要在添加 DOM 内容之前更早地动态更改样式。我认为，根据父规则选择某个类或修改样式表是解决此问题的两种最明显的方法。
鉴于这个特定示例的简单性，一个 CSS 定义就足够了；我认为没有必要使用 Javascript 修改样式表。我更多地将其视为通用的“如何与动态添加的元素进行交互？”问题而不是“如何在具有特定类的动态添加的元素上放置绿色背景？”问题。
是的，你说得对，这可能有点矫枉过正，但这是一种选择。

标签： javascript jquery html css

【解决方案1】：

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

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

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

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

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

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

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

【讨论】：

【解决方案2】：

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

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

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

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

请注意，使用这种方法，您需要修改所有向页面添加元素以触发 nodeinserted 自定义事件的函数。

【讨论】：

【解决方案3】：

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

$(document).ready(function(){
    //code here 
    $(".pointsbox").css("background-color","green");
});

【讨论】：

如果您在 DOM 加载后添加一些带有类点框的元素，这将不起作用。 :(
当它根本没有回答问题时，它是如何获得支持的？
@AnthonyGrist 似乎 Rowan 的代码在 DOM 加载之前执行。这不能解决问题吗？