shout out to everetcetera for inspiring this ramble! this ""article"" is about how to alter your webpage's css styling with javascript. i will talk about a couple different ways to do this, but please keep in mind that this is by no means an exhaustive list. further, every body do thing different!!!!!!!!!!!!!

adding inline styling

if you do not know about the differences between inline, internal, and external css, check out what w3schools has to say. for this article, i will remind you: inline styling has priority over internal and external styling.

with javascript, you can add/alter/remove attributes from your html elements. adding styling is therefore pretty easy. here is my approach:


// get the element
let element = document.getElementById("special-boy");

// apply special styling.
element.style.color = "magenta";

which changes your code like so!:

    
<!-- before -->
<p id="special-boy">lala lalaa! elmo world!</p>

<!-- after -->
<p id="special-boy" style="color: magenta;">lala lalaa! elmo world!</p>

here, you access an element's style with the .style property, which holds sub-properties for every css property. for instance, you could also change element.style.background to edit the background property, or element.style.backgroundColor to edit the background-color property.

note the difference in capitalization and lack of hyphens. in the css language, individual words in a property name are separated by hyphens (-), whereas in javascript, individual words are in camel case (camelCase). this is because in javascript, hyphens are an invalid character to include in a variable name, as they represent an arithmetic operation!

this strategy works for one element, or you could loop and do it for multiple elements as needed -- especially if you want to do something like giving a series of elements each their own colors.

add a class to an element

instead of altering an elements style attribute, you could alter its class attribute, and add [or remove!] a class. the page's styling will immediately update.

the class attribute is accessed like so:


// get the element
let element = document.getElementById("regular-boy");

// add a new class.
element.classList.add("special");

which alters your code like so:


<!-- before -->
<p id="regular-boy">wah! wawawa! wa!</p>

<!-- after -->
<p id="regular-boy" class="special">wah! wawawa! wa!</p>

as shown, the classList property is the list of classes applied to an element [the same values written in the html tag like so: <p class="one two three">], and the classList.add() method allows you to append a new class to the element.

altering the page's css rules

i actually learned something new during my research: you can in fact edit the css rules of a page. i have never done this before, but just like how there is a DOM [document object model], there is a CSSOM [cascading stylesheets objectmodel, or css object-model] which i didn't even know about.

i should note: the practicality of this moves into a more advanced territory. for example: if you don't want to alter an element's style, but you want to read from an element's style, that is where the cssom would come in.

I SHOULD ALSO NOTE: I HOPE TO BE ACCURATE BUT I HAVEN'T REALLY WORKED WITH THIS BEFORE! I COULD BE WRONG!!!! i link documentation below :]

in my first example, we altered an element's color with element.style.color, which set its inline color. element.style only includes inline styling, it will not tell you what color the element appears on your screen. here is where cssom comes in:


    // retrieve text color
    let textColor = window.getComputedStyle(document.body).color;

    // print it babey!
    console.log(textColor);

the window object has a method to get the "computed" style of a given element [in this example, the given element being document.body. the method window.getComputedStyle() will return an object that holds all the computed style properties of the given element. this includes internal/external styling!

as i have not worked with this before, i don't have too much to say about it. maybe go experiment yay!!!!!