css style change with javascript [closed]

Question

Create a class (component) lamp, which consists of a switch and the lamp itself, when you click on the lamp button on / off

button.onclick = function() { document.body.style.backgroundColor = ('green'); };

 .circle{ height: 40px; width: 40px; border: solid black 2px; border-radius: 40px; }

 <input type="button" id="button" value="Кнопка" /> <div class="circle"></div>

It turns out to change only the background color of the page itself

Why are you creating multiple questions for the same problem?

Mr. Brightside Brightside 1,506 1 golden mark 8 silver marks 19 bronze marks · Answer 1 · 2019-02-08T19:07:02

 function toggleButtonColor(el) { el.style.backgroundColor = el.style.backgroundColor == 'green' ? 'red' : 'green'; } document.getElementById('button').onclick = function() { toggleButtonColor(document.querySelector('.circle')); }

 .circle{ margin-left: 40px; display: inline-block; height: 40px; width: 40px; border: solid black 4px; border-radius: 40px; }

 <input type="button" id="button" value="On/off" /> <div class="circle"></div>

el.style.backgroundColor = el.style.backgroundColor == 'green'?
In short, it is designed to reduce the code - instead of if / else blocks, you can use constructs ? :
Here it means: “ is the background color green? (If yes) return red : (if not) return green ”

Answer 2 · 2019-02-08T19:40:01

Implemented with jQuery . The logic is:

We hang a click event on the div ;
By default, the button is turned off (the button with the btn class btn set to the off class);
By default the light is off (the light class lamoa set to white );
By clicking on the button the light turns on (with the btn button btn add the class on and the lampa lamp the class yellow ;
By repeated click we return default values by the same principle.

 $('.btn').on('click', function(){ if(this.classList.contains('off')){ $(this).removeClass('off').addClass('on').text('ON'); $('.lampa').removeClass('white').addClass('yellow'); } else{ $(this).removeClass('on').addClass('off').text('OFF'); $('.lampa').removeClass('yellow').addClass('white'); } });

 .btn{ margin-bottom: 5px; padding: 5px; width: 52px; height: 16px; color: white; text-align: center; border-radius: 99px; user-select:none; cursor:pointer; } .lampa{ padding: 10px; width: 32px; height: 32px; color: white; text-align: center; border-radius: 99px; user-select:none; cursor:none; border: 1px solid grey; } .off{ background-color: red; } .on{ background-color: green; } .white{ background-color: white; } .yellow{ background-color: yellow; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="block"> <div class="btn off">OFF</div> <div class="lampa white"></div> </div>

Analog on vanilla JS :

 const btn = document.getElementById('btn'); const lampa = document.getElementById('lampa'); btn.addEventListener('click', function(){ if(this.classList.contains('off')){ this.classList.add('on'); this.classList.remove('off'); this.innerHTML = 'ON'; lampa.classList.add('yellow'); lampa.classList.remove('white'); } else{ this.classList.add('off'); this.classList.remove('on'); this.innerHTML = 'OFF'; lampa.classList.add('white'); lampa.classList.remove('yellow'); } });

 #btn{ margin-bottom: 5px; padding: 5px; width: 52px; height: 16px; color: white; text-align: center; border-radius: 99px; user-select:none; cursor:pointer; } #lampa{ padding: 10px; width: 32px; height: 32px; color: white; text-align: center; border-radius: 99px; user-select:none; cursor:none; border: 1px solid grey; } .off{ background-color: red; } .on{ background-color: green; } .white{ background-color: white; } .yellow{ background-color: yellow; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="block"> <div id="btn" class="off">OFF</div> <div id="lampa" class="white"></div> </div>

PS The lamp is hot, so the cursor is not visible

write as a comment or you can replace the whole jquery, please

Answer 3 · 2019-02-08T19:53:10

 const circle = document.querySelectorAll('.circle'), input = document.querySelectorAll('input'); input.forEach((s, i, arr) => { s.addEventListener('click', () => { if (s.classList.contains('green')) { input.forEach((s, i, arr) => { arr[i].classList.remove('green'); arr[i].value = 'выкл'; circle[i].classList.remove('green'); }) } else { input.forEach((s, i, arr) => { arr[i].classList.remove('green'); arr[i].value = 'выкл'; circle[i].classList.remove('green'); }) s.classList.add('green'); circle[i].classList.add('green'); s.value = 'вкл'; } }) })

 .circle { margin: 5px; height: 40px; width: 40px; border: solid black 2px; border-radius: 40px; } .green.red { background-color: green } .red { background-color: red } .wrap { display: flex; padding: 5px }

 <div class="wrap"> <input class="red" type="button" value="Вык" /> <div class="red circle"></div> </div> <div class="wrap"> <input class="red" type="button" value="Вык" /> <div class="red circle"></div> </div> <div class="wrap"> <input class="red" type="button" value="Вык" /> <div class="red circle"></div> </div> <div class="wrap"> <input class="red" type="button" value="Вык" /> <div class="red circle"></div> </div>

Answer 4 · 2019-02-08T18:54:43

 button.onclick = function() { if (circle.style.backgroundColor == "green") circle.style.backgroundColor = "red"; else circle.style.backgroundColor = "green"; }

 #circle { margin-left: 40px; display: inline-block; height: 40px; width: 40px; border: solid black 4px; border-radius: 40px; }

 <input type="button" id="button" value="On/off"/> <div id="circle"></div>

css style change with javascript [closed]

Closed due to the fact that the essence of the issue is incomprehensible by the participants Igor , Stepan Kasyanenko , overthesanity , andreymal , 0xdb on Feb. 9 at 0:35 .

4 answers 4

More articles: