apply CSS style to particular elements dynamically

问题:

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.

回答1:

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

回答2:

With CSS you can define a child selector.

Building on that, you can dynamically add/remove a style class to your div and the style will apply to the children you specify in that selector.

Let's assume you want to apply this to a specific div, not any/every one. So give the target div an identifier:

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

Adding a dynamic style with simple javascript:

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

The CSS (using combined id and class on a child selector):

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

回答3:

Using CSS:

div p {your style goes here} 

jquery:

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

回答4:

You can apply the CSS dynamically for this example of yours in this way:

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

Or, when you wanna apply this when the page loads:

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

回答5:

Changing the css dynamically would be as simple as changing the top level class name for example

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

then the jquery would be

Everything below the class will change to its new style :)

fiddle

回答6:

i think hes talking about dynamically changed div's which even though they exist statically, when javascript "fills" them it actually recreates them and therefore the css doesn't "stick" because the css has already been loaded and now this new element, no matter the class doesnt have an event listener assigned to it.

kind of like when you have to use .on(click

.on('click', '.className', function() { } 

Pretty sure hes looking for the same thing i am, a "on load find this classname and then apply .css to it"

i have elements that load dynamically, and then need to be positioned after they have loaded and after the rest of the pages css has already been loaded.

something like:

.on('load', 'div.className', function() { do some css??? } 

文章来源: apply CSS style to particular elements dynamically