JavaScript Question: accessing and modifying style rules

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Post Reply
Bethrezen
Posts: 445
Joined: September 13th, 2003, 11:56 am

JavaScript Question: accessing and modifying style rules

Post by Bethrezen »

Hi all

Quick question let’s say I had this in my style sheet

Code: Select all

#demo
{
color:white;
background-color:black;
}
And let say that upon the push of a button I wanted to get the above and change it to this

Code: Select all

#demo
{
color:black;
background-color:white;
}
Now I’m aware that I could achieve this via something like this.

Code: Select all

<button onclick="inline()">change</button>
<p id="demo">testing</p>

function inline()
{
document.getElementById("demo").style.cssText = "background-color:blue; color:white";
}
Which would simply set an inline style thus achieving the desired effect.

I’m also aware I can do something like this if the value I wanted to modify was in an internal style sheet.

Code: Select all

<button onclick="internal()">change</button>
<p id="demo">testing</p>

function internal()
{
document.querySelector('style').innerHTML = '#demo {background-color:black; color:white;}';
}
What I haven’t been able to figure out though is how to do this if the value I want to modify is in an external style sheet. Now I know one possible approach to this is set-up a class in the style sheet and then use

Code: Select all

element.classList.add('toggle');
element.classList.remove('toggle');
to add and remove said class which would get the job done but that's not really what I'm trying to learn how to do. For the purpose of this little exercise what I want do do is access the external style sheet find the desired rule and then modify said rule.
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: JavaScript Question: accessing and modifying style rules

Post by jscher2000 »

Each sheet in document.styleSheets has methods to read, delete, and insert rules:

https://developer.mozilla.org/docs/Web/ ... StyleSheet

Note: If you try that for a cross-site style sheet, bad things happen, so a lot of error handling is needed.
Bethrezen
Posts: 445
Joined: September 13th, 2003, 11:56 am

Re: JavaScript Question: accessing and modifying style rules

Post by Bethrezen »

Note: If you try that for a cross-site style sheet, bad things happen, so a lot of error handling is needed.
To be honest the question was more out of academic curiosity than anything else because generally speaking using in-line styling is considered bad practice from the perspective of separating layout and presentation hence why we have external style sheets in the first place but I couldn't find a simple straightforward way to access and modify styles in an external style sheet the same way that I can for in-line or internal style sheets, I would have assumed that accessing and modifying styles in an external style sheet would have worked more or less the same way as it does for accessing and modifying styles in an internal style sheet assuming said style sheet is coming from the same place as the rest of the site anyway but apparently not.

Evidently this is why most people don't bother with modifying external style sheets and instead rely on the higher specificity that in-line styling has to override styles when needed as doing that in there scripts is way way simpler.

Edit
so took a look over the page you linked to and like most of these pages they are badly written and about a clear as mud rendering them more or less useless to me.

Honestly I don't know who writes the mozilla developer pages but they clearly need schooling in how to write user-friendly help pages, they also need schooling in accessibility because the font there using is fuzzy, barely legible and hard to read and clearly unfriendly to people with dyslexia.

If I had it my way I'd be telling who ever is responsible to do it again and this time stop using horrible unreadable fonts and actually write there help pages for beginners and not technophiles so that people like me can actual understand what they are talking about, I'd also be telling them to add some simple code example to help readers understand what they are talking about and stop overloading the page with information that is not relevant to the task as hand because it just make it difficult to fine the specific bit of info you are looking for, in this case how to access an external style sheet find a given style rule within it and then modify the value of said rule.
Post Reply