JavaScript CSS – Gain Expertise in the implementation of CSS Methods

Free Web development courses with real-time projects Start Now!!

After going through the previous tutorial on JavaScript Styles, I hope you have a better understanding of how JavaScript works with CSS and HTML. But there are some additional details related to CSS that we skipped before. We will cover them in this tutorial, but I suggest you learn the previous concept first.

Let’s say I have a heading and I want to change its color. Well, we have multiple options to do that. We will dig into each of them to be able to select the best one for a particular situation.

Methods of JavaScript CSS

We will dive into different methods to implement CSS using JavaScript.

1. Inline CSS

We used this approach in the DataFlair’s previous tutorial on JavaScript Styles, so we are all familiar with it. This is the most simple method to achieve the desired output. To do that, you select the DOM element you want to modify and change its inline styles.

The code for the task is as follows:

<html>
  <body>
      <h1>DataFlair</h1>

    <script>
        document.querySelector('h1').style.color = "navy";
    </script>

  </body>
</html>

Screenshot:

Inline CSS Code - JavaScript CSS

The output of the following program will look something like this.

Inline CSS output - JavaScript CSS

Note: The output for other programs of this tutorial are the same.

The code above added the style color to h1, as shown in the Browser Styles tab.

Wait a minute! Have you completed the JavaScript DOM Tutorial

2. Global Styles

Another way to get the previous output is by creating a <style> tag, fill it with CSS rules, then append the tag to the DOM. It will create the <style> tag inside the <head> tag of the document. We use JavaScript’s innerHTML property to add various styles to the page.

The code of the same would be as follows:

<script>
    var style = document.createElement('style');
        style.innerHTML = `
            h1 {
            color: navy;
            }
        `;
        document.head.appendChild(style);
</script>

Screenshot:

Global styles CSS code

I used backticks in the program to stretch the code into multiple lines. If you choose, you can use single or double inverted commas to define the property. But you won’t be able to add more than one property with them, so act as per your needs.

3. CSSOM insertRule

The CSS Object Model (CSSOM) is a set of APIs that allows the manipulation of CSS from JavaScript. This is a lesser-known, but very efficient option to add CSS to the document. While this technique might look similar to the previous one, these two are completely different. In this approach, we used a built-in JavaScript method, insertRule(), to add the CSS rules to the webpage. It allows the user to read and alter CSS styles dynamically.

The code to implement this approach is as follows:

<script>
    var style = document.createElement('style');
    document.head.appendChild(style);
    //using CSSOM insertRule
    style.sheet.insertRule('h1 {color: navy}');
</script>

Screenshot:

CSSOM insertRule code

Once applied, you cannot alter this property in Chrome DevTools since it doesn’t allow editing dynamic CSS styles. Keep this in mind while programming, else it might cause troubles later.

Do you know – How to Implement CSS Styles in JavaScript

4. Constructible Style Sheets

This method is only applicable for use in Chrome; thus, use it with caution. The createElement(‘style’) method and document.head.appendChild(style) statement adds a <style> element in the <head> tag of the document. The pitfall is that they may produce duplicate CSS code, with loads of overhead. This leads to inconsistent and inefficient styling in the code, which you must avoid.

Constructible stylesheets are a new technique to create and distribute reusable styles in the document. The CSSStyleSheet interface is the root of a collection of CSS representation interfaces, referred to as the CSSOM. It offers a programmatic way to manipulate style sheets as well as eliminating the problems associated with the old method.

To implement these stylesheets, use the code below:

<script>
    // creating a shared stylesheet:
        const sheet = new CSSStyleSheet();
        //changing color
        sheet.replaceSync('h1 {color: navy}');

        // applying the stylesheet to a document:
        document.adoptedStyleSheets = [sheet];
</script>

Screenshot:

Constructible Stylesheets Code

Summary

This was a very informative tutorial on the different ways to link JavaScript with CSS. Remember these concepts while working on a project since they will simplify your job, adding efficiency to your code. You must understand all the basic and intermediate topics from JavaScript tutorial series before you work with these advanced topics. Keep practicing, and you’ll get the hang of what programming in JavaScript is like in real-life. You can always ask for help if you face any difficulty. But don’t forget, practicing is the key to learn a language thoroughly, including JavaScript.

Time to learn about the JavaScript Modules in the DataFlair’s JavaScript Tutorial Series.

Did you like our efforts? If Yes, please give DataFlair 5 Stars on Google

follow dataflair on YouTube

Leave a Reply

Your email address will not be published. Required fields are marked *