Функция меняющая цвета js

158

24 апреля 2018, 02:16

Требуется создать функцию при исполнении которой, все элементы в html/css коде цвета #FAFAFA, меняли цвет на #333.

Answer 1

Вот вам пример с "просто изменение цвета". Попробуйте доработать его сами.

А вообще, менять цвет элемента из js вот таким перебором, это одна из самых ужасных практик. Попробуйте организовать элементы в группы с помощью аттрибута class и меняйте добавляя/удаляя требуемый класс у элемента

// find elements 
var banner = $("#banner-message") 
var button = $("button") 
 
// handle click and add class 
button.on("click", function(){ 
  let els = $('body').find('*') 
  els.each((i, el) => { 
  	el.style.background = '#ddd' 
  }) 
})

body { 
  background: #20262E; 
  padding: 20px; 
  font-family: Helvetica; 
} 
 
#banner-message { 
  background: #fff; 
  border-radius: 4px; 
  padding: 20px; 
  font-size: 25px; 
  text-align: center; 
  transition: all 0.2s; 
  margin: 0 auto; 
  width: 300px; 
} 
 
button { 
  background: #0084ff; 
  border: none; 
  border-radius: 5px; 
  padding: 8px 14px; 
  font-size: 15px; 
  color: #fff; 
} 
 
#banner-message.alt { 
  background: #0084ff; 
  color: #fff; 
  margin-top: 40px; 
  width: 200px; 
} 
 
#banner-message.alt button { 
  background: #fff; 
  color: #000; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="banner-message"> 
  <p>Hello World</p> 
  <button>Change color</button> 
</div>

Answer 2

Вот вам наглядный пример как это делается!

Можете изменить цвет фона при клике при hover даже можете написать имя цвета которое вам нужно в input чтобы получить его тут нет ничего сложного.

change_background = (color) => {document.bgColor = color;}

<form>  
  <label>цвет: <input type="text" name="color" >  
  </label> 
  <input name="clrs" type ="button" value="взять цвет" onClick = "change_background(color.value) " >  
</form> 
<a href="#" onClick="change_background('#099')">Голубой цвет</a> 
<a href="#" onMouseOver="change_background('#111')">Черный цвет</a> 
<a href="#" onMouseOver="change_background('#333')">Ваш цвет #333</a>