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.

<html> <body> <p id="p1">Hello World!</p> <script> document.getElementById("p1").style.color = "red"; </script> <p>The paragraph above was changed by a script.</p> </body> </html>
Code language: HTML, XML (xml)

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 myElement.style.color = "red"; myElement.style.backgroundColor = "yellow";
Code language: JavaScript (javascript)

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.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments