动态应用CSS样式到特定元素 [英] apply CSS style to particular elements dynamically

问题描述

我有一个带有段落的div：

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

我想动态地对这个div中的段落应用某种样式。可以这样做而不处理每个段落元素，但只是附加某种风格到div元素和所有的内部段落将受到影响？

也许与jquery。

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

---

感谢。

解决方案

p>不使用类：

  / *使用CSS * / 
 div p {
 color： ff0000; 
} 
 
 //使用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; 
} 
 
 //使用jQuery 
 $（div p.mypar）。css（{
 color：＃ff0000
}） ; 
  

使用< div> 元素：

 <！ -  HTML  - > 
< div class =mydiv> 
< p> ...< / p> 
< p> ...< / p> 
< / div> 
 
 / *使用CSS * / 
 div.mydiv p {
 color：＃ff0000; 
} 
 
 //使用jQuery 
 $（div.mydiv p）。css（{
 color：＃ff0000
}） ; 
  

I have a div with paragraphs inside:

<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?

Maybe with jquery.

It sounds for me like dynamical change of the stylesheet, is it possbile?

---

The right recommendation in answer's comments.

Thanks.

解决方案

Without using classes:

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

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

With classes for <p> elements:

<!-- 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:

<!-- 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样式到特定元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！