如何选择尚不存在的元素（jQuery）并更改其样式？答案

【问题标题】：How to select element that doesn't exist yet (jQuery) and change its style?如何选择尚不存在的元素（jQuery）并更改其样式？
【发布时间】：2012-01-19 11:12:58
【问题描述】：

下面是我的代码。我想更改#preview div 的背景颜色，但总是无法选择#preview。脚本执行时似乎不存在。其他 jQuery 脚本稍后会创建它。

jQuery("#panel").mouseleave(function(){
    var good_color = jQuery('.colorpicker_hex input').val();
    jQuery("#preview").css({ 'background-color': good_color });
});

如何选择所有当前和未来的#preview div 并更改它们的背景颜色？我认为有类似 live() 的东西，但我还没有找到 CSS 更改的示例。

【问题讨论】：

标签： jquery select colors element live

【解决方案1】：

jQuery 并没有专门做你列出的事情。不过，您可以添加一个 style 元素来执行此操作：

$("<style>#preview { background-color: #eee; }</style>")
    .appendTo(document.documentElement);

像所有样式规则一样，当任何元素匹配它时，它就会应用。当您将它添加到文档元素的末尾时，它应该会赢得任何样式冲突（除非存在特异性差异，但 id 选择器非常具体）。

Live example - 在 Chrome、Firefox、Opera、IE6 和 IE9 中测试和工作

【讨论】：

【解决方案2】：

你不能。基本上 jQuery 通过 DOM 树进行导航以选择合适的对象。
因此，在加载文档后运行脚本。

$(document).ready(function() {
    jQuery("#panel").mouseleave(function(){
        var good_color = jQuery('.colorpicker_hex input').val();
        jQuery("#preview").css({ 'background-color': good_color });
    });
});

#panel 或 #preview 在您的情况下可能不存在。

【讨论】：

【解决方案3】：

live()（现在已弃用，因此您应该改用on()）仅用于事件。无法选择尚不存在的元素。但是，您可以像这样创建一个元素：

var previewDiv = $('<div id="#preview" />');

而且此 div 尚未附加到您的文档中。你可以随意操作它的 CSS：

previewDiv.css({ 'background-color': good_color });

那么您之前负责创建脚本的脚本可以直接附加它：

previewDiv.appendTo(parentElement);

【讨论】：