javascript 将样式从 CSS 应用到新添加的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20738850/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Applying styles from CSS to newly appended elements
提问by Maximus S
I add an element to a parent div dynamically.
我动态地向父 div 添加一个元素。
$('.some_div').append("<li class="hi">hey!</li>")
In my CSS,
在我的 CSS 中，
.hi {
color: white;
}
However, since <li class="hi">is dynamically added, it seems the styles defined in CSS are not applied to the element. So,
但是，由于<li class="hi">是动态添加的，似乎 CSS 中定义的样式并未应用于元素。所以，
$('.some_div').append("<li class='hi'>hey!</li>")
$('li.hi').css({"color":"white"});
would actually do the trick, but it seems redundant to me as the style is already defined in CSS file. Is this the only way to do it?
实际上会做到这一点，但对我来说似乎是多余的，因为样式已经在 CSS 文件中定义了。这是唯一的方法吗？
Update:
更新：
$('.some_div').append('<li style="color:white" >hey!</li>')
The above will work, but since the style is already defined in a separate CSS file, it'd be still redundant. My question was if there is a way to avoid this redundancy.
上面的方法可行，但由于样式已经在单独的 CSS 文件中定义，它仍然是多余的。我的问题是是否有办法避免这种冗余。
in CSS,
在 CSS 中，
.some_div > li {
font-size: 20px;
background-color: 30px;
margin-right: 2px;
}
.hi {
color: white;
}
All of this won't be applied when I add a new element via ($).append(), so I am asking if there is a way to apply the styles that are already defined in a stylesheet, without having to re-defining them in a css()function.
当我通过添加一个新元素时，所有这些都不会应用($).append()，所以我问是否有办法应用已经在样式表中定义的样式，而不必在css()函数中重新定义它们。
采纳答案by Hiral
You need to escape name of class here.
您需要在此处转义班级名称。
Change
改变
$('.some_div').append("<li class="hi">hey!</li>");
to
到
$('.some_div').append("<li class='hi'>hey!</li>");
OR
或者
$('.some_div').append("<li class=\"hi\">hey!</li>");
Demo with style:
演示风格：
$('.some_div').append("<li style='color:green;'>hey!</li>");
OR
或者
$('.some_div').append("<li>hey!</li>").find("li:last").css("color","yellow");
回答by Arun P Johny
Your string concatenation could be the problem, since your string literal is enclosed within ""any occurrence of "within the string has to be escaped
您的字符串连接可能是问题所在，因为您的字符串文字包含在字符串中的""任何出现中"都必须转义
$('.some_div').append('<li class="hi">hey!</li>')
Demo: Fiddle
演示：小提琴
Note: also note that liis a valid child for ulor olelements, so the some_divmust be either one of them
注意：还要注意li是ul或ol元素的有效子元素，因此some_div必须是其中之一
回答by Sridhar R
Try this
试试这个
$('.some_div').append('<li class="hi">hey!</li>')
If you want to apply specific css for this element
如果你想为这个元素应用特定的 css
$('.some_div').append('<li style="color:white" >hey!</li>')
If you want to apply CSS based on class
如果你想基于类应用 CSS
$('.hi').css("color","white");
