You can also use JavaScript to style HTML elements, allowing you to dynamically change how HTML documents look. You can modify nearly all element styles, such as fonts, colors, margins, borders, background images, text alignment, size, position, and more.
In the next section, we'll go over different ways to set styles in JavaScript.
Inline styles are applied directly to a specific HTML element using the style attribute. In JavaScript, the style property is used to access or change an element's inline style.
The following example will change the color and font properties of an element with id="intro".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Set Inline Styles Demo</title>
</head>
<body>
<p id="intro">This is a paragraph.</p>
<p>This is another paragraph.</p>
<script>
// Selecting element
var elem = document.getElementById("intro");
// Appling styles on element
elem.style.color = "blue";
elem.style.fontSize = "18px";
elem.style.fontWeight = "bold";
</script>
</body>
</html>Many CSS properties, such as font-size, background-image, text-decoration, etc., have hyphens (-) in their names. In JavaScript, the hyphen is a reserved operator interpreted as a minus sign, so you can't write an expression like elem.style.font-size
Thus, in JavaScript, CSS property names with hyphens are converted to camelCase. This involves removing the hyphens and capitalizing the letter immediately after each hyphen. For example, the CSS property font-size becomes the DOM property fontSize, and border-left-style becomes borderLeftStyle, and so on.
Similarly, you can retrieve the styles applied to HTML elements using the style property.
The following example will obtain the style information from the element with id="intro".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Get Element's Style Demo</title>
</head>
<body>
<p id="intro" style="color:red; font-size:20px;">This is a paragraph.</p>
<p>This is another paragraph.</p>
<script>
// Selecting element
var elem = document.getElementById("intro");
// Getting style information from element
alert(elem.style.color); // Outputs: red
alert(elem.style.fontSize); // Outputs: 20px
alert(elem.style.fontStyle); // Outputs nothing
</script>
</body>
</html>The style property isn't very helpful for obtaining style information from elements because it only shows the style rules set in the element's style attribute, not those from other sources like embedded style sheets or external style sheets.
To get the values of all CSS properties actually used to render an element, you can use the window.getComputedStyle() method, as shown in the following example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Get Computed Style Demo</title>
<style type="text/css">
#intro {
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<p id="intro" style="color:red; font-size:20px;">This is a paragraph.</p>
<p>This is another paragraph.</p>
<script>
// Selecting element
var elem = document.getElementById("intro");
// Getting computed style information
var styles = window.getComputedStyle(elem);
alert(styles.getPropertyValue("color")); // Outputs: rgb(255, 0, 0)
alert(styles.getPropertyValue("font-size")); // Outputs: 20px
alert(styles.getPropertyValue("font-weight")); // Outputs: 700
alert(styles.getPropertyValue("font-style")); // Outputs: italic
</script>
</body>
</html>Tip: The value 700 for the CSS property font-weight is equivalent to the keyword bold. The color keyword red is equivalent to rgb(255,0,0), which is the RGB notation of the color.
You can also get or set CSS classes on HTML elements using the className property.
Since class is a reserved word in JavaScript, JavaScript uses the className property to refer to the value of the HTML class attribute. The following example will demonstrate how to add a new class or replace all existing classes on a <div> element with id="info".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Add or Replace CSS Classes Demo</title>
<style>
.highlight {
background: yellow;
}
</style>
</head>
<body>
<div id="info" class="disabled">Something very important!</div>
<script>
// Selecting element
var elem = document.getElementById("info");
elem.className = "note"; // Add or replace all classes with note class
elem.className += " highlight"; // Add a new class highlight
</script>
</body>
</html>There is an even better way to work with CSS classes. You can use the classList property to easily get, set, or remove CSS classes from an element. This property is supported in all major browsers except Internet Explorer versions before 10. Here's an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS classList Demo</title>
<style>
.highlight {
background: yellow;
}
</style>
</head>
<body>
<div id="info" class="disabled">Something very important!</div>
<script>
// Selecting element
var elem = document.getElementById("info");
elem.classList.add("hide"); // Add a new class
elem.classList.add("note", "highlight"); // Add multiple classes
elem.classList.remove("hide"); // Remove a class
elem.classList.remove("disabled", "note"); // Remove multiple classes
elem.classList.toggle("visible"); // If class exists remove it, if not add it
// Determine if class exist
if(elem.classList.contains("highlight")) {
alert("The specified class exists on the element.");
}
</script>
</body>
</html>