Zenn
🍦

JavaScript（バニラ）でCSSのパラメータを取得するときの注意点

2025/03/04に公開5件
CSS
HTML
JavaScript
tech

document.element.style と getComputedStyle(document.element) を使うときに、うっかりハマりがちな注意点。

<head>
<style>
#div3 {
  color: red;
}
</style>
</head>
<body>
  <div id="div1" style="color: red; font-size: 1em;">div1</div>
  <div id="div2" style="color: #f00; height: auto;">div2</div>
  <div id="div3">div3</div>
<script>

// <div> 内の style アトリビュートは style プロパティで読めるが、
console.log(document.getElementById('div1').style.color) // "red"
// #RGB 16進数フォーマットは rgb() 10進数フォーマットになる。
console.log(document.getElementById('div2').style.color) // "rgb(255, 0, 0)"
// <style> 内のパラメータは style プロパティでは読めない。
console.log(document.getElementById('div3').style.color) // ""
// getComputedStyle を使えば全て読めるが、色は rgb() 10進数形式になる。
console.log(getComputedStyle(document.getElementById('div1')).color) // "rgb(255, 0, 0)"
console.log(getComputedStyle(document.getElementById('div2')).color) // "rgb(255, 0, 0)"
console.log(getComputedStyle(document.getElementById('div3')).color) // "rgb(255, 0, 0)"

// 同様にサイズに関するパラメータも style プロパティで読めるが、
console.log(document.getElementById('div1').style.fontSize) // "1em"
console.log(document.getElementById('div2').style.height) // "auto"
// getComputedStyle を使うと全て px 単位になる。
console.log(getComputedStyle(document.getElementById('div1')).fontSize) // "16px"
console.log(getComputedStyle(document.getElementById('div2')).height) // "24px"

// 一度 style プロパティを書けば、
document.getElementById('div3').style.color = 'blue'
// style プロパティを読めるようになる（表示上も上書きされる）。
console.log(document.getElementById('div3').style.color) // "blue"

</script>
</body>

Discussion

junerjuner

getComputedStyle を使えば全て読めるが、色は rgb() 10進数形式になる。

10進になるとは限らないのでは……？

例えば background-color に background-color: color(from red srgb r g b / 0.5); って color() 関数で設定すると 解釈結果の color(srgb 1 0 0 / 0.5) になりますし。

https://developer.mozilla.org/ja/docs/Web/CSS/color_value/color

そういう意味では red の名前は rgb(255, 0, 0) のエイリアスとして定義されているかもしれません。

junerjuner

追伸:

  • background-color: #FF000088; と設定すると rgba(255, 0, 0, 0.533) に
  • background-color: #FF0000; と設定すると rgb(255, 0, 0) に
  • background-color: hsl(0, 100%, 50%); と設定すると rgb(255, 0, 0) に
  • background-color: color(from red display-p3 r g b); と設定すると color(display-p3 0.917568 0.200274 0.13854) に
  • background-color: color(from red xyz x y z); と設定すると color(xyz-d65 0.412426 0.212648 0.0193173) に

になるので 通常は rgb もしくは rgba に単純化されて color() のときだけ別扱いみたいですね。

IppeiIppei

コメントありがとうございます。
rgb, rgba 以外になるケースもあるんですね。普段 color() で指定をすることがないので全然思いつきませんでした。
いずれにせよ、想定と違う形式が戻る可能性を失念していると思わぬところでハマりそうです。