0

В стиле задан фон канваса: #mainCanvas { background-color:green; }

Пытаюсь получить этот параметр, но значение пустое.

zoomCtx.fillStyle = mainCanvas.style.background;

Как исправить?

4
  • document.getElementById('mainCanvas')[0].style.backgroundColor w3schools.com/jsref/prop_style_backgroundcolor.asp 28 мар 2016 в 19:02
  • @Jean-Claude Спасибо. не работает. Возвращает пустое значение. А для чего [0] ?
    – CodeGust
    28 мар 2016 в 19:27
  • 1
    пардон getElementById возвращает один элемент, остальные вроде getElementsByTagName- массив, поэтому там нужен индекс массива [0]. рабочий пример тут. Как получать стили написано тут. 28 мар 2016 в 19:58
  • @Jean-Claude СпасиБо! Работает! var bgc = getComputedStyle(mainCanvas).backgroundColor; (отмечу, как принятый, если как ответ это разместите..)
    – CodeGust
    28 мар 2016 в 20:30

1 ответ 1

1

getElementById возвращает один элемент, остальные, например, getElementsByTagName - массив, поэтому там нужен индекс массива [0]. Рабочий пример ниже.

window.onload = function() {
  console.log(getComputedStyle(document.getElementById('myid')).backgroundColor);
  console.log(getComputedStyle(document.getElementsByTagName('span')[0]).backgroundColor);
};
div {
  background-color: tomato;
}
span {
  background-color: #bfa;
}
<div id='myid'>div</div>
<span>span</span>

Как получать стили написано тут.

Иногда нужно поработать с DOM в консоли браузера, в том числе получить значение стиля. Обычно это делается так:

element = document.getElementById('foo');
color = element.style.backgroundColor;

Но работает это только тогда, когда у элемента стиль задан inline:

<div style="color:red;">

Если же стиль задан в CSS, то element.style.backgroundColor ничего не вернёт. Чтобы всё заработало, нужно запросить просчитанные стили:

element = document.getElementById('foo');
color = window.getComputedStyle(element).backgroundColor;

Ваш ответ

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

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