How to override CSS using JavaScript?

Question

I created an HTML page with three square images, every image is in a checkbox's label. I created a JavaScript function which checks how many checkboxes are checked.

On every input (which is a checkbox) I add an event listener, the goal of it is to limit The number of checked checkboxes to two. I used CSS so when an image is checked or hovered a red border appears.

My problem is that when I uncheck an image because my mouse is still on it I can't see that it was unchecked until my mouse isn't on the image.

So how can I override the CSS and hide or delete the border when an image is unchecked even if the mouse is still on it? I would like to use plain JavaScript for this.

    function checkedtimes(checkboxes) {
        return checkboxes
        .map(checkbox => document.getElementById(checkbox).checked)
        .reduce((x, y) => x + y)
    }
    let logos = ["green","yellow","blue"]
    for (let logo of logos) {
        logo = document.getElementById(logo)
        logo.addEventListener('change', e=> {
            e.preventDefault()
            if (logo.checked) {
                if (checkedtimes(logos)>2) {
                    logo.checked = false
                }
            }
            else {
            
            }
        })
    }

        
        #logos {
            display: flex;
            justify-content: center;
        }
        
       .logo {
            display: none;
        }
        .logo-label {
            display: inline-block;
            margin: 10px;
            text-align: center;
        }
        .logo:checked + .logo-label>img, .logo:hover + .logo-label>img {
            border: solid 2px red;
        }

<head>

</head>

<body>
    <form id="form">
        
        <div id="logos">
            <input type="checkbox" id="green" class="logo" />
            <label for="green" class="logo-label">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAgAAAewB9vX2MxIybzJsAeQCr1Ku42rgAdwC527mBv4HZ7NkAcwB0uXR4unj8/vzz9/Pk8OTP5s/I4siy17KRx5GgzqCOxY6ezZ4n9oUoAAABg0lEQVR4nO3dS24CQQwA0Z4/zQx/BnL/k2aQyCLZBCEhKHe9E7jkrSWn3f4wHk+nPORzv2jv5uaX+mnr5l9z+4BL/4ghD3+M6TytFt2P6mN1T5k2qe9SZFVdQOElfGFbvXuIl7KQz0I+C/ks5LOQr4jCOXxhYyGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIV0RhbSGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8hVRuA5fGP9iyEI4C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5Cui8Bq+MP6fGQvhLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5iij8Cl/Yd+8e4qUs5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQbykcwhfm8IXxd2ghnIV8FvJZyGchn4V8FvLdCqcqstU2jZs6sm3+Bjn6EUWa4rsaAAAAAElFTkSuQmCC">
            <br>
            green
        </label>
            <input type="checkbox" id="yellow" class="logo"/>
            <label for="yellow" class="logo-label">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAQlBMVEX//wCHhwB4eABqagBcXABRUQBeXgB6egCDgwBaWgBUVAAqKgCMjAAICAAsLAAwMAA2NgA/PwBERABzcwBmZgBISABKZ9uGAAABoUlEQVR4nO3dS07DQBAG4Z74FSfmFYf7XxUWLAAhgZBarfLUdwDrr6U1I008PD49v9xu0zRd5nGchw/7cvpkaf92/vKhHyzLPvzB/X3db+Z1+u5yjTWObYu5ekKyFmP1hGQt7tUTkrUYqicks5DPQj4L+Szks5Cvh8K9ekKyFkv1hGQtTtUTklnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXw9nB+26gnJLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9Cvhbn6gnJergxdPxbXxbSWchnIZ+FfBbyWchnIZ+FfBbyWchnIZ+FfBbyWchnIZ+FfBbyWcjXQ6G3Teh6eGfGQjoL+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+VrM1ROStRirJySzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTrofD4p9xr9YRkLS7VE5K1mKonJLOQz0I+C/ks5LOQz0I+C/l6KDz6H/AW160d2fb6BtUzB8w8fMwHAAAAAElFTkSuQmCC">
            <br>
            yellow
        </label>
            <input type="checkbox" id="blue" class="logo"/>
            <label for="blue" class="logo-label">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAAP99ff+MjP+bm/+rq/+4uP+2tv+pqf+Kiv+Bgf/Z2f90dP94eP/8/P/z8//k5P/Pz//IyP+ysv+Rkf+Vlf+goP+urv+kpP+Ojv/Q7Co7AAABmUlEQVR4nO3dS04DMRAG4e5kJm8eCUng/ieFBQvEhgip1apxfb7AX0tLlhxPzy+H1/N5nufLNE3b9be31U+7/Lf96k/X9QNu0wPu82+bQ1xi2Y4xdU8olgMUvndPKJax7p5QzEI+C/ks5LOQz0K+EQqv3ROKZay6JxSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5RijcdU8oll9n2Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQr6MffeEYiO8GFr+qy8L6Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5Av46N7QrER/pmxkM5CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkG+Ewlv3hGIZ2+4JxTKm7gnFLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTLuHdPKJax6Z5QLGPunlDMQj4L+Szks5DPQj4L+SzkG6Fw6TfgUxyOuWSn+RNFSAfbc4zH5wAAAABJRU5ErkJggg==">
            <br>
            blue
        </label>
        </div>
    </form>
</body>

If you want border on hover and on check then you need to toggle any different class on logo input like active and give border css on active class. this will separate both css on hover and on checked — Vivek Tarsariya
– Vivek Tarsariya, Commented Mar 3, 2021 at 11:46

Lakshya Thakur · Accepted Answer · 2021-03-03 12:19:54Z

This is more js oriented solution but I guess can work for you.

I am using mouseenter and mouseleave on img to simulate hover.

An additional click event on the img such that if the logo was checked and you clicked on the img, the border will be set to none else border will be set to solid 2px red.

function checkedtimes(checkboxes) {
        return checkboxes
        .map(checkbox => document.getElementById(checkbox).checked)
        .reduce((x, y) => x + y)
    }
    let logos = ["green","yellow","blue"]
    for (let logo of logos) {
        logo = document.getElementById(logo)
        logo.addEventListener('change', e=> {
            e.preventDefault()
            if (logo.checked) {
                if (checkedtimes(logos)>2) {
                    logo.checked = false
                }
            }
            else {
            
            }
        })
        const image = logo.nextElementSibling.firstElementChild;
       image.addEventListener('mouseenter',e=>{
         if(!logo.checked){
           image.style.border = 'solid 2px red';
         }
        })
        image.addEventListener('mouseleave',e=>{
        if(!logo.checked){
           image.style.border = 'none';
         }
        })
         image.addEventListener('click',e=>{
          if(logo.checked){
          image.style.border = 'none';
          }
          else {
          image.style.border = 'solid 2px red';
          }
         })
    }

#logos {
            display: flex;
            justify-content: center;
        }
        
       .logo {
            display: none;
        }
        .logo-label {
            display: inline-block;
            margin: 10px;
            text-align: center;
        }
        .logo:checked + .logo-label>img {
            border: solid 2px red;
        }

<head>

</head>

<body>
    <form id="form">
        
        <div id="logos">
            <input type="checkbox" id="green" class="logo" />
            <label for="green" class="logo-label">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAgAAAewB9vX2MxIybzJsAeQCr1Ku42rgAdwC527mBv4HZ7NkAcwB0uXR4unj8/vzz9/Pk8OTP5s/I4siy17KRx5GgzqCOxY6ezZ4n9oUoAAABg0lEQVR4nO3dS24CQQwA0Z4/zQx/BnL/k2aQyCLZBCEhKHe9E7jkrSWn3f4wHk+nPORzv2jv5uaX+mnr5l9z+4BL/4ghD3+M6TytFt2P6mN1T5k2qe9SZFVdQOElfGFbvXuIl7KQz0I+C/ks5LOQr4jCOXxhYyGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIV0RhbSGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8hVRuA5fGP9iyEI4C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5Cui8Bq+MP6fGQvhLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5iij8Cl/Yd+8e4qUs5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQbykcwhfm8IXxd2ghnIV8FvJZyGchn4V8FvLdCqcqstU2jZs6sm3+Bjn6EUWa4rsaAAAAAElFTkSuQmCC">
            <br>
            green
        </label>
            <input type="checkbox" id="yellow" class="logo"/>
            <label for="yellow" class="logo-label">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAQlBMVEX//wCHhwB4eABqagBcXABRUQBeXgB6egCDgwBaWgBUVAAqKgCMjAAICAAsLAAwMAA2NgA/PwBERABzcwBmZgBISABKZ9uGAAABoUlEQVR4nO3dS07DQBAG4Z74FSfmFYf7XxUWLAAhgZBarfLUdwDrr6U1I008PD49v9xu0zRd5nGchw/7cvpkaf92/vKhHyzLPvzB/X3db+Z1+u5yjTWObYu5ekKyFmP1hGQt7tUTkrUYqicks5DPQj4L+Szks5Cvh8K9ekKyFkv1hGQtTtUTklnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXw9nB+26gnJLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9Cvhbn6gnJergxdPxbXxbSWchnIZ+FfBbyWchnIZ+FfBbyWchnIZ+FfBbyWchnIZ+FfBbyWcjXQ6G3Teh6eGfGQjoL+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+VrM1ROStRirJySzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTrofD4p9xr9YRkLS7VE5K1mKonJLOQz0I+C/ks5LOQz0I+C/l6KDz6H/AW160d2fb6BtUzB8w8fMwHAAAAAElFTkSuQmCC">
            <br>
            yellow
        </label>
            <input type="checkbox" id="blue" class="logo"/>
            <label for="blue" class="logo-label">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAAP99ff+MjP+bm/+rq/+4uP+2tv+pqf+Kiv+Bgf/Z2f90dP94eP/8/P/z8//k5P/Pz//IyP+ysv+Rkf+Vlf+goP+urv+kpP+Ojv/Q7Co7AAABmUlEQVR4nO3dS04DMRAG4e5kJm8eCUng/ieFBQvEhgip1apxfb7AX0tLlhxPzy+H1/N5nufLNE3b9be31U+7/Lf96k/X9QNu0wPu82+bQ1xi2Y4xdU8olgMUvndPKJax7p5QzEI+C/ks5LOQz0K+EQqv3ROKZay6JxSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5RijcdU8oll9n2Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQr6MffeEYiO8GFr+qy8L6Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5Av46N7QrER/pmxkM5CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkG+Ewlv3hGIZ2+4JxTKm7gnFLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTLuHdPKJax6Z5QLGPunlDMQj4L+Szks5DPQj4L+SzkG6Fw6TfgUxyOuWSn+RNFSAfbc4zH5wAAAABJRU5ErkJggg==">
            <br>
            blue
        </label>
        </div>
    </form>
</body>

Thank you very much, that's perfect for me! Just a question will it work if I put the 2 first event listener from the image on the logo?
logo has display:none so it won't work. That's why I chose your img element.
@SH The else bit for click event was missing so added that too.

halfer · Accepted Answer · 2021-08-07 08:20:50Z

1

You can just use style.setProperty(string, string). The first parameter is the CSS atttribute and the second parameter is the CSS value. Both of them need to be strings in order to work.

let element = document.getElementById("element-id")

element.style.setProperty('color', '#ffffff');

To know if the mouse is still hover the element you can create an event listener on the element.

element.addEventListener("mouseover", () => {
    element.style.setProperty('color', '#ffffff');
});

element.addEventListener("mouseout", () => {
    element.style.setProperty('color', '#000000');
});

edited Aug 7, 2021 at 8:20

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Mar 3, 2021 at 11:47

Grinnex.

1,0492 gold badges14 silver badges26 bronze badges

3 Comments

Yep Yep Over a year ago

Thanks but here how can I know with javascript if the mouse is still on the image?

Grinnex. Over a year ago

@SH I have updated the answer to your needs

Yep Yep Over a year ago

Thank you very much! that will help me.

Oleh Morozov · Accepted Answer · 2021-03-03 12:13:28Z

I think the problem is related to your css styling, as you are displaying a border around the picture when the mouse hovers over it. Please change your css by removing :hover

.logo:checked + .logo-label>img{
   border: solid 2px red;
}

Modified code snippet is below

function checkedtimes(checkboxes) {
        return checkboxes
        .map(checkbox => document.getElementById(checkbox).checked)
        .reduce((x, y) => x + y)
    }
    let logos = ["green","yellow","blue"]
    for (let logo of logos) {
        logo = document.getElementById(logo)
        logo.addEventListener('change', e=> {
            e.preventDefault()
            if (logo.checked) {
                if (checkedtimes(logos)>2) {
                    logo.checked = false
                }
            }
            else {
            
            }
        })
    }

        #logos {
            display: flex;
            justify-content: center;
        }
        
       .logo {
            display: none;
        }
        .logo-label {
            display: inline-block;
            margin: 10px;
            text-align: center;
            
        }
       .logo:checked + .logo-label>img{
            border: solid 2px red;
        }

<body>
    <form id="form">
        
        <div id="logos">
            <input type="checkbox" id="green" class="logo" />
            <label for="green" class="logo-label">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAgAAAewB9vX2MxIybzJsAeQCr1Ku42rgAdwC527mBv4HZ7NkAcwB0uXR4unj8/vzz9/Pk8OTP5s/I4siy17KRx5GgzqCOxY6ezZ4n9oUoAAABg0lEQVR4nO3dS24CQQwA0Z4/zQx/BnL/k2aQyCLZBCEhKHe9E7jkrSWn3f4wHk+nPORzv2jv5uaX+mnr5l9z+4BL/4ghD3+M6TytFt2P6mN1T5k2qe9SZFVdQOElfGFbvXuIl7KQz0I+C/ks5LOQr4jCOXxhYyGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIV0RhbSGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8hVRuA5fGP9iyEI4C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5Cui8Bq+MP6fGQvhLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5iij8Cl/Yd+8e4qUs5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQbykcwhfm8IXxd2ghnIV8FvJZyGchn4V8FvLdCqcqstU2jZs6sm3+Bjn6EUWa4rsaAAAAAElFTkSuQmCC">
            <br>
            green
        </label>
            <input type="checkbox" id="yellow" class="logo"/>
            <label for="yellow" class="logo-label">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAQlBMVEX//wCHhwB4eABqagBcXABRUQBeXgB6egCDgwBaWgBUVAAqKgCMjAAICAAsLAAwMAA2NgA/PwBERABzcwBmZgBISABKZ9uGAAABoUlEQVR4nO3dS07DQBAG4Z74FSfmFYf7XxUWLAAhgZBarfLUdwDrr6U1I008PD49v9xu0zRd5nGchw/7cvpkaf92/vKhHyzLPvzB/X3db+Z1+u5yjTWObYu5ekKyFmP1hGQt7tUTkrUYqicks5DPQj4L+Szks5Cvh8K9ekKyFkv1hGQtTtUTklnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXw9nB+26gnJLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9Cvhbn6gnJergxdPxbXxbSWchnIZ+FfBbyWchnIZ+FfBbyWchnIZ+FfBbyWchnIZ+FfBbyWcjXQ6G3Teh6eGfGQjoL+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+VrM1ROStRirJySzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTrofD4p9xr9YRkLS7VE5K1mKonJLOQz0I+C/ks5LOQz0I+C/l6KDz6H/AW160d2fb6BtUzB8w8fMwHAAAAAElFTkSuQmCC">
            <br>
            yellow
        </label>
            <input type="checkbox" id="blue" class="logo"/>
            <label for="blue" class="logo-label">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAAP99ff+MjP+bm/+rq/+4uP+2tv+pqf+Kiv+Bgf/Z2f90dP94eP/8/P/z8//k5P/Pz//IyP+ysv+Rkf+Vlf+goP+urv+kpP+Ojv/Q7Co7AAABmUlEQVR4nO3dS04DMRAG4e5kJm8eCUng/ieFBQvEhgip1apxfb7AX0tLlhxPzy+H1/N5nufLNE3b9be31U+7/Lf96k/X9QNu0wPu82+bQ1xi2Y4xdU8olgMUvndPKJax7p5QzEI+C/ks5LOQz0K+EQqv3ROKZay6JxSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5RijcdU8oll9n2Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQr6MffeEYiO8GFr+qy8L6Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5Av46N7QrER/pmxkM5CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkG+Ewlv3hGIZ2+4JxTKm7gnFLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTLuHdPKJax6Z5QLGPunlDMQj4L+Szks5DPQj4L+SzkG6Fw6TfgUxyOuWSn+RNFSAfbc4zH5wAAAABJRU5ErkJggg==">
            <br>
            blue
        </label>
        </div>
    </form>
</body>

Just run code and check does it fit to you

Collectives™ on Stack Overflow

How to override CSS using JavaScript?

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related