change CSS property using javascript CSS3?

In this article, we are going to learn about how to change CSS properties using javascript and the changes that we are going to do in the output it would be live which means if we are changing let’s take an example of padding, in the output it would change in the CSS but as you refresh the page CSS go back to its previous state, I have learned this from javascript30.

If you are here just for the code then a copiable code(HTML, CSS & JAVASCRIPT) is provided at the end of the article,

Now, what we want is when we change the input we should get our output at that instance as we can see in the gif, let’s start with writing HTML markup

HTML :

In HTML we will start with the heading which has a span tag that changes its color as we change the color input,

let’s create one div with a class named controls which will have all the labels and input types accordingly provide the value to all the input and min & max value to our spacing and blur inputs,

here we are gonna add a data-sizing attribute with the value “px” to the blur and spacing input, the reason why are we creating this data-* attribute that we will learn further,

at the end add an image in the img tag on which we are going to have our experiment now let’s style our HTML using CSS,

CSS :

first we will give some property to our body so that all the element will be in center with some background color and change font properties using css,

now let’s start with creating variables in root it is a one fo the CSS selectors, so the root is like parent of all so the variables, the variables that are created in root are global variable,

apply different properties to the img like padding for the spacing, background-color for the css colors, filter for the blur and css color of the span all the values that are given to the properties will be variables that we have created in root, here the CSS ends now let’s learn how to make all this work using javascript,

JAVASCRIPT :

we will start scripting with creating a variable which with the help of using queryselectorAll has all the input queries,

create a function named handleupdate which will be called after each event of change in input or mousemove to the input,

now when the event occurs our function gets called in which we will have one variable named suffix, it stores the value of the attribute data-sizing which is “px”, to store this value we will use this.dataset.sizing the reason why we are using this is that the this.dataset provides us all the data-* attributes from which we are selecting “sizing” attribute using dot operator,
the output of this.dataset as I hover on the Inputs is shown below,

css

now what we want is to change the value in the CSS of input variable as we create an event, to do that we will select the documentelement to style and set its property using (`–${this.name}`, this.value + suffix) now let’s breakdown this parenthesis, lets first see what the this.name gives us when i hover on input the console output is shown below,

as we can see this.name gives us the name of the input on which we hover, now using backticks () we would be able to add (–) this to the name which will be our variable so that’s how we are going to give the value to our variables,

now let’s see what this.value gives us and why are we using suffix at all, when i hover on input the console output is shown below,

as we can see in the output we will have the integer value but to change the CSS property we need px or even % we can use so now you know the reason now let me add the suffix and give you the output it is shown below,

this is how we would change the CSS using javascript i hope you got the understanding of it the copiable code is given below

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>variables</title>
    <style>
        :root{
            --base: #ffc600;
            --spacing: 10px;
            --blur: 10px;
        }

        img{
            padding: var(--spacing);
            background-color: var(--base);
            filter: blur(var(--blur));
        }

        .h1{
            color: var(--base);
        }


        body{
            text-align: center;
            background: #193549;
            color: white;
            font-family: 'helvetica neue', sans-serif;
            font-weight: 100;
            font-size: 50px;
        }

        .controls{
            margin-bottom: 50px;
        }

    </style>
</head>
<body>
    <h2>Update CSS variables with <span class="h1">JS</span></h2>
    <div class="controls">
        <label for="Spacing">Spacing:</label>
        <input type="range" name="spacing" id="spacing" min="10" max="200" value="10" data-sizing="px">
        
        <label for="Blur">Blur:</label>
        <input type="range" name="blur" id="blur" min="0" max="25" value="10" data-sizing="px">
        
        <label for="base">Base Color</label>
        <input type="color" name="base" id="color" value="#ffc600">
    </div>
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" width="350px" height="250px" alt="">
    <script>
        
        const inputs = document.querySelectorAll('.controls input');

        function handleupdate()
        {
            const suffix = this.dataset.sizing;
            console.log(this.value + suffix);
            
            document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
        
        }
        
        inputs.forEach(input => input.addEventListener('change', handleupdate));
        inputs.forEach(input => input.addEventListener('mousemove', handleupdate));
    </script>
</body>
</html>

Leave a Comment

Your email address will not be published.

Scroll to Top