JavaScript DOM Styling. Here’s What You Need To Know
Posted by TotalDC
Now that we know what is DOM and how you can select HTML elements using JavaScript, let’s learn about JavaScript DOM styling and how you can style HTML elements them dynamically using JavaScript.
Styling DOM Elements Using JavaScript
As you can see from the title of this article, you can apply style on HTML elements to change the visual presentation of HTML documents dynamically using JavaScript. You can set all the styles for the elements like, fonts, colors, margins, borders, background images, text alignment, width and height, position etc.
How To Set Inline Styles On Elements Using JavaScript
Like we discussed in this article inline styles are applied directly to the specific HTML element using the style attribute. In JavaScript the style property is used to get or set the inline style of an element.
Let’s set the color and font properties of an element with id=”intro”. Here’s how this looks:
<!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
let elem = document.getElementById("intro");
// Appling styles on element
elem.style.color = "red";
elem.style.fontSize = "18px";
elem.style.fontWeight = "bold";
</script>
</body>
</html>How To Get Style Information From Elements Using JavaScript
You not only can apply styles using JavaScript, but you can find what styles are applied on the HTML elements using the same style property. Here’s how:
<!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
let elem = document.getElementById("intro");
// Getting style information from element
console.log(elem.style.color); // Result: red
console.log(elem.style.fontSize); // Result: 20px
</script>
</body>
</html>Keep in mind that style property only returns the style rules from inline CSS not those that come from internal or external CSS.
To get the values of all CSS properties that are actually used to render an element you can use the window.getComputedStyle() method. Here’s how it looks:
<!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
let elem = document.getElementById("intro");
// Getting computed style information
let styles = window.getComputedStyle(elem);
console.log(styles.getPropertyValue("color")); // Result: rgb(255, 0, 0)
console.log(styles.getPropertyValue("font-size")); // Result: 20px
console.log(styles.getPropertyValue("font-weight")); // Result: 700
console.log(styles.getPropertyValue("font-style")); // Result: italic
</script>
</body>
</html>How To Add CSS Classes To Elements Using JavaScript
You can not only set attributes to existing CSS classes, but create or alter new CSS classes using JavaScript’s className property. JavaScript uses the className property to refer the value of the HTML class attribute. Here’s an example that shows how to add a new class or replace all existing classes to a div 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">Some random text</div>
<script>
// Selecting element
let 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 another way to work with CSS classes. You can use the classList property to get, set or remove CSS classes from an element. 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">Some random text</div>
<script>
// Selecting element
let 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")) {
console.log("The specified class exists");
}
</script>
</body>
</html>
Leave a Reply