动态地将 CSS 样式应用于特定元素答案

【问题标题】：apply CSS style to particular elements dynamically动态地将 CSS 样式应用于特定元素
【发布时间】：2012-06-27 13:53:56
【问题描述】：

我有一个 div，里面有段落：

<div>
  <p>...</p>
  <p>...</p>
</div>

我想动态地将某种样式应用于此 div 中的段落。是否可以在不处理每个段落元素的情况下做到这一点，而只是以某种方式将样式附加到 div 元素并且所有内部段落都会受到影响？

也许用 jquery。

这听起来像是样式表的动态变化，有可能吗？

answer's cmets 中的正确推荐。

谢谢。

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

不使用类：

/* using CSS */
div p {
    color: #ff0000;
}

// using jQuery
$("div p").css({
    color : "#ff0000"
});

带有<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"
});

带有<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"
});

【讨论】：

谢谢。我了解如何使用 jquery 和 css 选择器来做到这一点，但它只会影响现有的段落，如果我将动态添加它们，新的将不会受到影响——我希望它们会受到影响。可以将 css 样式表应用于元素，但是 css 样式表可以动态更改吗？
CSS 适用于动态添加的元素。应再次运行 JavaScript 案例以将样式附加到新元素。
所以不可能做我想做的事？更改 css 样式并自动应用它所有新添加的特定类型的元素？
@WHITECOLOR：有可能，但通常不需要。为什么不能一开始就使用 CSS 设置样式，或者在新添加段落时调用.css()？
1) 因为样式是动态的 2) 我试图找到一种更快（就执行时间而言）的方法。

【解决方案2】：

使用 CSS，您可以定义 child selector。

在此基础上，您可以向div 动态添加/删除样式类，该样式将应用于您在该选择器中指定的子项。

假设您要将其应用于特定的div，而不是任何/每个。所以给目标div一个标识符：

<div id='foo'>
  <p>...</p>
  <p>...</p>
</div>

使用简单的 javascript 添加动态样式：

document.getElementById('foo').style.className='dynamic_style'

CSS（在子选择器上使用combined id and class）：

div#foo.dynamic_style > p { /* your style definition*/ }

【讨论】：

如果我必须在运行时编写样式？ "font-size: 21px; margin: 12px"，我没有在 css 文件中定义 'dynamic_style'。
您不是动态地定义样式，而是动态地应用样式。因此，在 CSS 中静态定义样式。通过使用 Javascript 将 className 添加到文档元素来动态应用样式。
好的，谢谢 =) 就我而言，无法静态定义样式。

【解决方案3】：

使用 CSS：

div p {your style goes here}

jquery:

$('div p').css('property', 'value');

【讨论】：

【解决方案4】：

您可以通过这种方式为您的这个示例动态应用 CSS：

function applyCSS()
{
    $("div > p").css({
        "background": "#fff",
        "color": "#000"
    });
}

或者，当你想在页面加载时应用这个：

$(document).ready(function(){
    applyCSS();
});

【讨论】：

【解决方案5】：

动态更改 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;
}

那么jquery就是

$(document).ready(function() {
    $('#test').click(function() {
        $('#toggleme').toggleClass('class1');
        $('#toggleme').toggleClass('class2');
    });
});

类下面的所有内容都将更改为新样式:)

fiddle

【讨论】：