stackoom
  简体   繁体   中英

How to override css using javascript?

 原文  2021-03-03 11:26:48  4   3    javascript/ html/ css

Question

I created an html page with 3 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 2.
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 don't know any jQuery so please don't give solutions in it) 

 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>

3 answers

solution1
 2 ACCPTED  2021-03-03 12:05:46

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>

solution2
 1  2021-03-03 11:47:28

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');
});

I hope it helps you! Happy coding!

solution3
 0  2021-03-03 11:40:27

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to override CSS with javascript? How to override the css using the JQuery How to override the CSS scroll behavior with scrollTo in JavaScript How to override CSS3 animation with Javascript? How to override inline css through javascript? How to override a templates default option with javascript and css Override javascript css how to override css height using jquery How to override HTML image using CSS how to override material ui css using css (reactjs)?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM