Skip to content

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.

See also  How to tell if a String contains a Substring in Javascript
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x