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

#javascript #html #css #вёрстка #функции

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

Ответы

Ответ 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;
}


  
Hello World
  



Ответ 2

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

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



change_background = (color) => {document.bgColor = color;}
 
  цвет:  
  
   

Голубой цвет
Черный цвет
Ваш цвет #333


Ответ 3

const hexToRgb = hex => {
  let arrBuff = new ArrayBuffer(4);
  let vw = new DataView(arrBuff);
  vw.setUint32(0, parseInt(hex, 16), false);
  let arrByte = new Uint8Array(arrBuff);
  return arrByte[1] + ", " + arrByte[2] + ", " + arrByte[3];
}

const color = new RegExp(hexToRgb("FAFAFA"), "gi");

const newColor = hexToRgb("333333");

const replacement = cssText => {
  return cssText.match(color) && cssText.replace(color, newColor);
}

const sheets = document.styleSheets;

for (let len = sheets.length, si = 0; si < len; si++) {
  let rules = sheets[si].cssRules;
  if (!rules) {
    continue
  }
  for (let len = rules.length, ri = 0; ri < len; ri++) {
    let cssText = rules[ri].cssText;
    cssText = replacement(cssText);
    if (!cssText) {
      continue
    }
    document.styleSheets[si].insertRule(cssText, rules.length);
    document.styleSheets[si].deleteRule(ri);
  }
}

const styled = document.querySelectorAll("[style]");

[].forEach.call(styled, element => {
  let cssText = replacement(element.style.cssText);
  if (cssText) {
    element.style.cssText = cssText
  }
})
div {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  display: inline-block;
  margin: 10px;
}

.test {
  background: #FAFAFA;
}