Javascript 将CSS样式动态应用于特定元素

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

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

我想动态地将某个样式应用于这个div中的段落。是否可以不处理每个段落元素而将样式附加到div元素，这样所有内部段落都会受到影响

也许使用jquery

对我来说，这听起来像是样式表的动态变化，可能吗

---

答案评论中的正确建议

谢谢。

不用上课：

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

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

对于

元素的类：

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

/*使用CSS*/
第p.mypar分区{
颜色：#ff0000；
}
//使用jQuery
$（“div p.mypar”）.css({
颜色：“ff0000”
});

带有

元素的类：

<!-- HTML -->
<div class="mydiv">
    <p>...</p>
    <p>...</p>
</div>

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

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

/*使用CSS*/
分区mydiv p{
颜色：#ff0000；
}
//使用jQuery
$（“div.mydiv p”）.css({
颜色：“ff0000”
});

不使用类：

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

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

对于

元素的类：

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

/*使用CSS*/
第p.mypar分区{
颜色：#ff0000；
}
//使用jQuery
$（“div p.mypar”）.css({
颜色：“ff0000”
});

带有

元素的类：

<!-- HTML -->
<div class="mydiv">
    <p>...</p>
    <p>...</p>
</div>

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

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

/*使用CSS*/
分区mydiv p{
颜色：#ff0000；
}
//使用jQuery
$（“div.mydiv p”）.css({
颜色：“ff0000”
});

使用CSS：

div p {your style goes here}

jquery：

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

使用CSS：

div p {your style goes here}

jquery：

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

使用CSS，您可以定义一个

在此基础上，您可以向

div

动态添加/删除样式类，并且样式将应用于您在该选择器中指定的子级

假设您希望将此应用于特定的

div

，而不是任何/每个div。因此，给目标

div

一个标识符：

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

CSS（在子选择器上使用）：

使用CSS，您可以定义一个

在此基础上，您可以向

div

动态添加/删除样式类，并且样式将应用于您在该选择器中指定的子级

假设您希望将此应用于特定的

div

，而不是任何/每个div。因此，给目标

div

一个标识符：

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

CSS（在子选择器上使用）：

---

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

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

或者，当您要在页面加载时应用此选项时：

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

---

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

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

或者，当您要在页面加载时应用此选项时：

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

---

例如，动态更改css就像更改顶级类名一样简单

<div id="toggleme" class="class1">
  <p>...</p>
  <p>...</p>
</div>
<a id="test">Test</a>

那么jquery将是

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

班级以下的一切都将改变为新的风格：）

---

动态更改css就像更改顶级类名一样简单

<div id="toggleme" class="class1">
  <p>...</p>
  <p>...</p>
</div>
<a id="test">Test</a>

那么jquery将是

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

班级以下的一切都将改变为新的风格：）

---

谢谢。我知道如何使用jquery和css选择器，但它只会影响现有的段落，如果我动态地添加它们，新的不会受到影响——我希望它们受到影响。css样式表可以应用于元素，但是css样式表可以动态更改它吗？css可以很好地用于动态添加的元素。JavaScript案例应该再次运行，以将样式附加到新元素上。所以不可能实现我想要的吗？更改css样式并自动应用所有特定类型的新添加元素？@WHITECOLOR:这是可能的，但通常不是必需的。为什么你不能首先使用CSS来设置样式，或者在新添加段落时运行

.CSS（）

调用呢？1）因为样式是动态的2）我正在尝试找到一种更快的方法（在执行时间方面）。谢谢。我知道如何使用jquery和css选择器，但它只会影响现有的段落，如果我动态地添加它们，新的不会受到影响——我希望它们受到影响。css样式表可以应用于元素，但是css样式表可以动态更改它吗？css可以很好地用于动态添加的元素。JavaScript案例应该再次运行，以将样式附加到新元素上。所以不可能实现我想要的吗？更改css样式并自动应用所有特定类型的新添加元素？@WHITECOLOR:这是可能的，但通常不是必需的。为什么不能首先使用CSS设置样式，或者在新添加段落时运行

.CSS（）

调用呢？1）因为样式是动态的2）我正在尝试找到一种更快的方法（就执行时间而言）。如果我必须在运行时编写样式？“字体大小：21px；边距：12px”，我没有在css文件中定义“动态样式”。您没有动态定义样式，而是动态应用样式。因此，在CSS中静态地定义样式。通过使用Javascript向文档元素添加类名来动态应用样式。好的，谢谢=）就我而言，静态定义样式是不可能的。如果我必须在运行时编写样式？“字体大小：21px；边距：12px”，我没有在css文件中定义“动态样式”。您没有动态定义样式，而是动态应用样式。因此，在CSS中静态地定义样式。通过使用Javascript将className添加到document元素来动态应用样式。好的，谢谢=）就我而言，静态定义样式是不可能的。