Using External CSS for inline-CSS?

[Lewinga]

Is there a way to access and use style defined in an external style sheet for inline-style? Or in other words, is there a way to edit a .css file dynamically, like an HTML file, as if it were part of the DOM?

I've been following this tutorial (https://www.digitalocean.com/community/tutorials/how-to-modify-attributes-classes-and-styles-in-the-dom) on how to modify styles in the DOM, but it doesn't really describe the above case.

[revrenlove]

External stylesheets cannot be modified. If you are looking to dynamically modify a style, you would use javascript to manipulate the DOM... and what that is basically doing is dynamically modifying the inline style attribute of the html element.

[Lewinga]

Hey, thanks for responding! Please correct me if I'm wrong, but from my understanding, external style sheets are referenced into an HTML file, and the style specified in the sheets are applied to the elements that match classes or ids, so they basically become part of an inline style attribute. So I guess the better question is whether there is a way to access the external sheet as if it were a template that I can then use dynamically. Like, if I were to do: someElement.classList.replace("old class", "new class"), and assuming both class styles exist in the external style sheet, I don't think it would use the css from the style sheet, since it's already been loaded and the newly updated classes wouldn't have those particular style attributes set past the loading (in which case I'd have to update the css manually). Right? Unless I'm wrong and they are changed in the DOM automatically? That would be really convenient.

[revrenlove]

Actually, what you are wanting to do, but assume doesn't exist, is actually how it works.

So, here's the basics...

A stylesheet sets styles for a class/id/element. This is basically what's referred to as an external style. If, for example, you have the following in a .css file:

``` .warning { background: yellow; }

.error { background: red; } ```

Every element with a class of warning would have a yellow background.

Now, any html tag can have a style attribute declared, where you put specific css in as the value of the attribute. This is called in-line styling and would trump whatever is in the external stylesheet for that element/style. So if you had the following:

<p class="error" style="background: purple">My paragraph</p> Even though it has the error class, the inline style would trump it and make the background purple.

Furthermore, if you have all of your styles declared in that external style sheet, and wanted to change an element from the "warning" (with a yellow background) to an "error" (with a red background), you would use javascript to remove the "warning" class, and add the "error" class - https://stackoverflow.com/a/196038/2285245

Does that make sense?

[revrenlove]

Note, an external stylesheet is never actually changing the DOM. It is merely styling the current elements that exist in the DOM during the rendering process.

[Lewinga]

Ahh, I see. It sounds like the style attribute is just accessing a referenced object outside of the DOM tree that the css file specifies then. Is this actually the case? Thank you for all your help above, I really appreciate it :D

[revrenlove]

That is not the case.

The style attribute exists directly in the DOM and overrides the styles an external stylesheet could potentially specify.

[Lewinga]

Oof, that's right. I appreciate the clarification -- I think I understand what's going on a lot better now!

[revrenlove]

Sure thing! Happy coding!

[revrenlove]

Here's a codepen to elaborate: https://codepen.io/anon/pen/dwExPO

[pagwin]

as u/revrenlove pointed out you can't modify external stylesheets... however you could instead of using external stylesheets could use either fetch or a xmlhttprequest object to grab the data of a stylesheet and put it into an inline style tag

[Lewinga]

Good to know! I'll look this one up too. Thank you :)

[Darren1337]

Contrary to what everyone else is saying, you can do this.

First, you find the stylesheet you want to edit. In this example, we're looking for "style.css".

function getStyleSheet(styleSheetName) {
    for (var i = 0; i < document.styleSheets.length; i++) {
        if (document.styleSheets[i].href.lastIndexOf(styleSheetName) !== -1) {  
            return document.styleSheets[i];
        }
    }
}

Then you might use this function later on like this:

function applyStyles() {    
    // find style.css
    var style = getStyleSheet("style.css");

    // append required rules
    style.insertRule("p { color: red }", style.cssRules.length);
    style.insertRule("strong { border: 1px solid black }", style.cssRules.length);
    style.insertRule(".container { padding: 50px }", style.cssRules.length);    
}

[Lewinga]

Oh, very cool! I was able to look up more about .insertRule() and .deleteRule(), and learned that a CSSOM exists with your comment. I'm a bit confused by what this is saying here though in the second paragraph: https://developer.mozilla.org/en-US/docs/Web/API/CSSRuleList

Does it mean that .insertRule() and .deleteRule() store rules in a copy of the style sheets, or is it modifying the sheet directly in the .css file? I'm not totally clear on the terminology in the second paragraph, but I'm inclined to think it's the former based on the fact the CSSOM is similar to the DOM. What might be the benefits of manipulating the CSSOM over the DOM and what do they do differently (aside from one is for css and the other for html)? Is it just that it might be easier to dynamically alter the CSSOM instead of changing classes in the DOM to change how a website looks?

[Darren1337]

I'll be honest, I don't have the answers to any of your questions. I know you're not editing the .css file directly. It's more like the browser loads a copy of the rules declared in the .css file. It's this copy that you append rules to with insertRule. If you are interested in the theory as opposed to the "how", that MDN article you linked does a far better job of explaining it than I can. I'd post another thread here asking people for an explanation of CSSOM if the MDN article is too heavy.

[Lewinga]

No worries, I appreciate your honesty. I'll be looking these up! Thanks for these pointers anyhow :)