Change more complex css with javascript

Question

I have this CSS code:

        #texte>div:not(:last-child)>p:not(.show){
        display:none;
    }

And I need to write javascript in order to change the style to match the above css. I honestly have no idea how to get to this kind of selectors using js.

JavaScript can only change styles on specific elements. The best you could do is generate CSS via javascript and add it to the head (as if it was a standard <style> tag), or select the elements manually (jQuery and similar libraries support selecting using CSS syntax) — Dave
– Dave, Commented Sep 26, 2013 at 20:40
Also you may want to consider simplifying your structure. Unless all the divs really are representing the same sort of data, you should probably add a class to the last one instead of selecting it like that. — Dave
– Dave, Commented Sep 26, 2013 at 20:42
It might be more efficient to modify the classes attached to the parent class (eg #texte ... { display: none }; #texte.open ... { display: block }). Also document.querySelector() or document.querySelectorAll(). — cimmanon
– cimmanon, Commented Sep 26, 2013 at 20:48
The structure is that complex and I can do nothing about it. In simple terms, #texte is a table div and its divs are table-cells. I got too much text in some of the cells (all except the last) so I hide it and put a "more.." button. The show class are the p elements containing the text that will still be displayed before clicking the "more" button. Obviously, at some point, the text should restore the attributes above, so that's where I need help — Mihai Bujanca
– Mihai Bujanca, Commented Sep 26, 2013 at 20:54
In that case, I would assign a snip (or similar) class to all the divs which should be reduced, and remove this class via JavaScript when the show button is pressed. No need to change styles via JavaScript at all. — Dave
– Dave, Commented Sep 26, 2013 at 20:59

Krasimir · Accepted Answer · 2013-09-26 20:52:50Z

1

Did you try with

var elements = document.querySelectorAll("#texte>div:not(:last-child)>p:not(.show)");
for(var i=0; el=elemenets[i]; i++) {
   el.setAttribute("style", "...your styles here...");
}

answered Sep 26, 2013 at 20:52

Krasimir

13.6k4 gold badges45 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change more complex css with javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related