How to Style an Element Using Javascript

If you need to style an element using Javascript then you can use the style object to support all your CSS needs.


    <p id="p1">Hello World!</p>

      document.getElementById("p1").style.color = "red";

    <p>The paragraph above was changed by a script.</p>


If you need to do this purely in a Javascript file itself, then:

// Get a reference to the element
var myElement = document.querySelector("#p1");

// Now you can update the CSS attributes = "red"; = "yellow";

Note that where CSS properties would use dashes to separate words, like background-color, Javascript instead uses camel casing and drops the space.

Example: background-color would become backgroundColor.