Как получить backgroundColor элемента, когда он задан свойством CSS background? - PullRequest
Новая
       0

Как получить backgroundColor элемента, когда он задан свойством CSS background?

0 голосов
/ 06 марта 2020

Один из способов установить свойство background-color элемента - использовать background: #someColorValue. Однако это не изменит свойства backgroundColor в style этого элемента. В результате, когда я использую element.style.backgroundColor, он возвращает пустую строку. Эта проблема не возникает при установке цвета напрямую с помощью свойства background-color. Почему это происходит ??

1 Ответ

1 голос
/ 07 марта 2020

Когда вы обращаетесь к свойству style (ElementCSSInlineStyle.style) элемента, вы получаете доступ к его встроенному стилю . Это означает, что если вы даете элементу стиль через класс, вы все равно не сможете получить к нему доступ через style. В результате он вернет вам пустую строку ('').

Window.getComputedStyle, с другой стороны, вернет:

. .. значения всех CSS свойств элемента, после применения активных таблиц стилей и разрешения любых базовых c вычислений, эти значения могут содержать

Это означает, что вы можете получить доступ к заданному стилю через класс, просто потому, что он дает вам все CSS свойства после применения всех активных таблиц стилей (включая те, которые применяются через класс).

В вашем конкретном случае вы пытаетесь доступ background. Свойство background CSS на самом деле является сокращением , которое также устанавливает множество других CSS свойств, связанных с фоном. Когда вы указываете только цвет, используя background, другие свойства будут автоматически вставлены со значениями по умолчанию. Вы можете получить доступ к этому background свойству через ElementCSSInlineStyle.style. Однако при доступе к background в возвращаемом объекте Window.getComputedStyle вы всегда получите пустую строку. Это связано с тем, что возвращаемый объект не имеет ключа background; он содержит только ключи для каждого фонового CSS свойства (например, background-color, background-clip, et c.).

Вот простой пример, демонстрирующий, как вы не можете получить доступ к не-встроенному стиль через style свойство элемента, а также как вы не можете получить доступ к значению свойства, которое является сокращением через объект Window.getComputedStyle

const boxOne = document.querySelector('#boxOne')
const boxTwo = document.querySelector('#boxTwo')

console.log(`Box One: background ${boxOne.style['background']}, background-color ${boxOne.style['background-color']}`)

console.log(`Box Two: background ${boxTwo.style['background']}, background-color ${boxTwo.style['background-color']}`)

const boxOneComputedStyles = getComputedStyle(boxOne)
const boxTwoComputedStyles = getComputedStyle(boxTwo)

// There's no 'background' key in getComputedStyle

console.log(`Box One (Computed Styles): background ${boxOneComputedStyles['background']}, background-color ${boxOneComputedStyles['background-color']}`)

console.log(`Box Two (Computed Styles): background ${boxTwoComputedStyles['background']}, background-color ${boxTwoComputedStyles['background-color']}`)
#boxOne,
#boxTwo {
  background: #121212DD;
  border-radius: 5px;
  width: 50px;
  height: 50px;
  margin: 1em;
}
<div id="boxOne" style="background-color: #121212DD;"></div>
<div id="boxTwo" style="background: #121212DD;"></div>
...