JS DOM Styling
Welcome to another tutorial, here you learn how to style elements in JavaScript.
Styling DOM Elements in JavaScript
You can use JavaScript to apply style to HTML elements to change the visual presentation of HTML documents dynamically. With it, you can set almost all the styles for the elements like fonts, colors, margins, borders, background images, width and height, text alignment, and so on.
Now, let’s look at various methods of setting styles in JavaScript.
Setting Inline Styles on Elements
The style attribute enables the application of Inline styles directly to the specific HTML element. The style property is used to get or set the inline style of an element in JavaScript.
The example below will set 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>
Naming Conventions of CSS Properties in JavaScript
Most CSS properties (like background-image, font-size, etc.) contain hyphens (-) in their names. In JavaScript, the hyphen is a reserved operator and it is interpreted as a minus sign (-). Therefore, it is not possible to write an expression, such as; ‘elem.style.font-size’
CSS property names that contain one or more hyphens are converted to intercapitalized style words in JavaScript. This is done by removing the hyphens and capitalizing the letter immediately while following each hyphen. Hence, the CSS property font-size becomes the DOM property ‘fontSize’, the border-left style becomes ‘borderLeftStyle’, etc.
Getting Style Information from Elements
Similarly, you get the styles applied to the HTML elements using the style property.
The style property is used to get the styles applied to the HTML element.
The example below will get the style information from the element having 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 has lapses when it comes to getting style information from the elements because it only returns the style rules set in the element's style attribute, but not those that come from elsewhere like style rules in the embedded style sheets, or external style sheets.
The window.getComputedStyle() method can be used to get the values of all CSS properties that are used to render an element, just as shown in the example below:
<!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 used to represent the keyword ‘bold’. The color keyword ‘red’ is also represented as ‘rgb(255,0,0)’, which is the rgb notation of a color.
Adding CSS Classes to Elements
To get or set CSS classes to the HTML elements you can use the className property.
However class is a reserved word in JavaScript, hence, JavaScript uses the className property to refer to the value of the HTML class attribute.
The example below will show you how to add a new class, or replace all existing classes with an <div> element having 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>The classList property is a better way to work with CSS classes. It can be used to get, remove or set CSS classes easily from an element, it is supported in all major browsers except Internet Explorer before version 10. Below is 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>