如何为 css 创建实时事件答案

【问题标题】：How to create live event for css如何为 css 创建实时事件
【发布时间】：2013-04-29 17:51:51
【问题描述】：

我怎样才能使这段代码生效？

$("#send_button").css({ opacity: 0.2 });

此代码应用于document ready 上 div 内部的元素。该 div 被事件中的其他 div 替换，然后用html() 再次以动态方式重新插入。

这是 div（示例）：

<div id="dinamic_div"><img src="image.jpg" id="send_button"></div>

【问题讨论】：

对不起，是send_button，我写错了:)
使用 javascript 应用的 CSS 没有“实时”，它只应用于页面上当前的元素。要插入也适用于未来元素的 CSS，您只需在样式表中设置样式即可。如果这不可行，则必须在创建元素时将样式标签插入头部或设置元素样式。

标签： jquery css events live

【解决方案1】：

创建一个 CSS 规则，它将应用于任何匹配选择器的对象，即使它是动态创建的。

#send_button {opacity: 0.2;}

或者，在类名上创建一个不透明的 CSS 规则，并将类名放在你的按钮上：

.lightButton {opacity: 0.2;}

<div id="dinamic_div">
    <img src="image.jpg" class="lightButton" id="send_button">
</div>

如果你必须用 javascript 来做，那么你最简单的方法就是在创建动态对象时设置它的样式。

如果你不能这样做，你可以用 javascript 创建一个 CSS 规则。

工作示例：

var html = '<div id="dinamic_div"><img src="http://dummyimage.com/200x100/000/fff&text=Hello" id="send_button"></div>';

$(html).appendTo(document.body);

var style = document.createElement("style");
style.type = "text/css";
style.innerHTML = "#send_button {opacity: 0.2;}";
document.getElementsByTagName("head")[0].appendChild(style);

工作演示：http://jsfiddle.net/jfriend00/Cnbvg/

【讨论】：

我用 CSS 做的。谢谢！