Смена css кода по клику

213

29 июля 2018, 15:00

Есть вот такой код по клику на кнопку меняется фон и цвет текста body, как сделать что бы по клику той же кнопки менялись стили любого элемента(тега, класса)

var btn = document.getElementById('btn'); 
 
btn.onclick = function() { 
  document.body.classList.toggle('change-mode'); 
}

.change-mode { 
  background: black; 
  color: white; 
}

<button id="btn">сменить режим</button> 
<p>lorem ipsum dolor</p>

Answer 1

Если я правильно понял суть вопроса, то вот ответ.

И с тегами, и с классами, и с id.

$('.btn').on('click', function(){ 
	$('div').toggleClass('change-mode'); 
  $('span').toggleClass('change-mode2'); 
  $('i').toggleClass('change-mode3'); 
  $('#four').toggleClass('change-mode4'); 
  $('.second').toggleClass('change-mode5'); 
});

.change-mode { 
  background: black; 
  color: white; 
} 
 
.change-mode:hover{ 
  color: #aaa; 
  background-color: #111; 
} 
 
.change-mode2 { 
  background: yellow; 
  color: red; 
} 
 
.change-mode2:hover{ 
  color: #bbb; 
  background-color: #222; 
} 
 
.change-mode3 { 
  background: pink; 
  color: green; 
} 
 
.change-mode3:hover{ 
  color: #ccc; 
  background-color: #333; 
} 
 
.change-mode4 { 
  background: grey; 
  color: orange; 
} 
 
.change-mode4:hover{ 
  color: #ddd; 
  background-color: #444; 
} 
 
.change-mode5 { 
  background: purple; 
  color: brown; 
} 
 
.change-mode5:hover{ 
  color: #eee; 
  background-color: #555; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div> 
  <div> 
    <button class="btn">сменить режим</button> 
    <span>lorem ipsum dolor</span> 
  </div> 
   <div> 
    <p class='second'>lorem ipsum dolor</p> 
  </div> 
   <div> 
    <i>lorem ipsum dolor</i> 
  </div> 
   <div> 
    <p id='four'>lorem ipsum dolor</p> 
  </div> 
</div>

Answer 2

По первому вопросу - мы можем так менять тему - с боку три кнопки В теме dark есть второй клик в котором мы дважды меняем hover

$(".linear").on("click", function() { 
  $("body").css({ 
    "background": "linear-gradient(45deg, lightblue,green,#fff)" 
  }); 
  $("body").removeClass("new new1"); 
}); 
$(".dark").on("click", function() { 
  $("body").addClass("new").css({ 
    "background": "#202020", 
    "filter": "invert(50)" 
  }); 
}); 
 
$(".dark").on("dblclick", function() { 
  $("body").addClass("new1").css({ 
    "background": "#202020", 
    "filter": "invert(50)" 
  }); 
}); 
 
$(".light").on("click", function() { 
  $("body").css({ 
    "background": "#fff", 
    "filter": "invert(0)" 
  }); 
  $("body").removeClass("new new1"); 
});

* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  height: 100vh; 
} 
 
main { 
  padding: 20px; 
} 
 
main div { 
  display: flex; 
  align-items: center; 
  flex-direction: row; 
} 
 
main h2 { 
  padding: 20px 0; 
} 
 
main div p { 
  padding: 0 30px; 
} 
 
.colorsheme { 
  position: fixed; 
  top: 14px; 
  right: 10px; 
} 
 
.colorsheme span { 
  padding: 6px 12px; 
  border: 1px solid #ccc; 
  cursor: pointer; 
  color: #000; 
} 
 
.new { 
  filter: invert(50)!important; 
} 
 
.new span:hover { 
  background: violet; 
} 
 
.new1 { 
  filter: invert(50)!important; 
} 
 
.new1 span:hover { 
  background: green; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
 
<div class="colorsheme"> 
  <span class="linear">linear</span> 
  <span class="dark">dark</span> 
  <span class="light">light</span> 
</div> 
<main> 
  <h2>Какой то заголовок</h2> 
  <div> 
    <img src="http://placehold.it/200/cc0" alt=""> 
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, nemo modi laborum tempora quam impedit distinctio autem nesciunt placeat ipsum praesentium est corrupti! Ut nobis eveniet voluptates quod eaque alias! </p> 
  </div> 
</main> 
 
<main> 
  <h2>Какой то заголовок</h2> 
  <div> 
    <img src="http://placehold.it/200/cc0" alt=""> 
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, nemo modi laborum tempora quam impedit distinctio autem nesciunt placeat ipsum praesentium est corrupti! Ut nobis eveniet voluptates quod eaque alias! </p> 
  </div> 
</main>