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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: