javascript 将 CSS 样式动态应用于特定元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11204084/
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
apply CSS style to particular elements dynamically
提问by WHITECOLOR
I have a div with paragraphs inside:
我有一个里面有段落的div：
<div>
<p>...</p>
<p>...</p>
</div>
I want dynamically to apply a certain style to paragraphs inside this div. Is it possible to do that without handling each paragraph element, but just attach somehow style to div element and all inside paragraphs would be affected?
我想动态地将某种样式应用于此 div 内的段落。是否可以在不处理每个段落元素的情况下做到这一点，但只需将样式附加到 div 元素，所有内部段落都会受到影响？
Maybe with jquery.
也许用jquery。
It sounds for me like dynamical change of the stylesheet, is it possbile?
对我来说，这听起来像是样式表的动态变化，可能吗？
The right recommendation in answer's comments.
答案评论中的正确建议。
Thanks.
谢谢。
回答by VisioN
Without using classes:
不使用类：
/* using CSS */
div p {
color: #ff0000;
}
// using jQuery
$("div p").css({
color : "#ff0000"
});
With classes for <p>elements:
使用<p>元素类：
<!-- HTML -->
<div>
<p class="mypar">...</p>
<p class="mypar">...</p>
</div>
/* using CSS */
div p.mypar {
color: #ff0000;
}
// using jQuery
$("div p.mypar").css({
color : "#ff0000"
});
With classes for <div>element:
使用<div>元素类：
<!-- HTML -->
<div class="mydiv">
<p>...</p>
<p>...</p>
</div>
/* using CSS */
div.mydiv p {
color: #ff0000;
}
// using jQuery
$("div.mydiv p").css({
color : "#ff0000"
});
回答by sudocode
With CSS you can define a child selector.
使用 CSS，您可以定义子选择器。
Building on that, you can dynamically add/remove a style class to your divand the style will apply to the children you specify in that selector.
在此基础上，您可以动态地向您div的样式添加/删除样式类，并且样式将应用于您在该选择器中指定的子项。
Let's assume you want to apply this to a specific div, not any/every one. So give the target divan identifier:
假设您想将此应用于特定的div，而不是任何/每个。所以给目标div一个标识符：
<div id='foo'>
<p>...</p>
<p>...</p>
</div>
Adding a dynamic style with simple javascript:
使用简单的 javascript 添加动态样式：
document.getElementById('foo').style.className='dynamic_style'
The CSS (using combined id and classon a child selector):
CSS（在子选择器上使用组合的 id 和 class）：
div#foo.dynamic_style > p { /* your style definition*/ }
回答by Praveen Kumar Purushothaman
You can apply the CSS dynamically for this example of yours in this way:
您可以通过以下方式为您的示例动态应用 CSS：
function applyCSS()
{
$("div > p").css({
"background": "#fff",
"color": "#000"
});
}
Or, when you wanna apply this when the page loads:
或者，当您想在页面加载时应用它时：
$(document).ready(function(){
applyCSS();
});
回答by AbstractChaos
Changing the css dynamically would be as simple as changing the top level class name for example
例如，动态更改 css 就像更改顶级类名一样简单
<div id="toggleme" class="class1">
<p>...</p>
<p>...</p>
</div>
<a id="test">Test</a>
?
?
.class1 {
background-color:#F00;
}
.class1 p {
color:#00F;
}
.class2 {
background-color:#00F;
}
.class2 p {
color:#F00;
}?
then the jquery would be
那么 jquery 将是
$(document).ready(function() {
$('#test').click(function() {
$('#toggleme').toggleClass('class1');
$('#toggleme').toggleClass('class2');
});
});?
Everything below the class will change to its new style :)
类下面的所有内容都将更改为新样式:)
回答by SVS
Using CSS:
使用 CSS：
div p {your style goes here}
jquery:
查询：
$('div p').css('property', 'value');
