1

Я бы хотел получить цвет фона из CSS но ни одним из методов мне известных это сделать не выходит https://jsfiddle.net/f8e37r1d/3/

Метод getComputedStyle работает в Хроме, как его использовать в FF не понятно, т.к. делаю по инструкции из https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle но лист со стилями пустой, вернее, там только стили, значений нет.

HTML

<div id="test">click</div>
<div id="getcolor"></div>
<div id="res"></div>

CSS

#test {
    width: 50px;
    height: 50px;
    text-align: center;
    border-width: 4px;
    border-style: solid;
    border-color: red;
}
#getcolor{
  background-color: rgb(249, 201, 16);
}

JS

test.onclick = function(e) {

      var Brush = function(id){
      console.log('internal func');

      var color1 = document.getElementById('getcolor').style.background;
      console.log(color1); // color1 is empty in FF

      var color2 = window.getComputedStyle(getcolor,null).getPropertyValue('background');
      console.log(color2); // color2 is empty in FF but work in Chrome

      var color3 = window.getComputedStyle(getcolor, null);
      console.dir(color3); // color3 is empty
    }

    Brush(e.target.id);
}

3 ответа 3

1

alert(getComputedStyle(document.getElementById("getcolor")).backgroundColor);
#test {
    width: 50px;
    height: 50px;
    text-align: center;
    border-width: 4px;
    border-style: solid;
    border-color: red;
}
#getcolor{
  background-color: rgb(249, 201, 16);
}
<div id="test">click</div>
<div id="getcolor"></div>
<div id="res"></div>

0

Вот так работает и в хроме и в FF:

test.onclick = function(e) {
  var element = document.getElementById('getcolor');
  alert(window.getComputedStyle(element, null).getPropertyValue("background-color"));
}
#test {
    width: 50px;
    height: 50px;
    text-align: center;
    border-width: 4px;
    border-style: solid;
    border-color: red;
}
#getcolor{
  background-color: rgb(249, 201, 16);
}
<div id="test">click</div>
<div id="getcolor"></div>
<div id="res"></div>

0

Загвоздка в том была что color3 действительно отображает стили как будто они пустые, но color3.backgroundColor отдаёт нужное значение.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.