LANG SELRCT

コードを書く場所についてはこちら

2018年3月10日土曜日

getComputedStyleでスタイルを取得する


要素のスタイルを取得する時に class で設定したスタイルは element.style では取得できず、getComputedStyleで取得できることを知った時の備忘録です


styleとclassで取得方法は異なる
  • style="color:green;" のようにstyleで設定されている場合
    • elem.style.color
    • などで各プロパティ(colorとかwidthとか)の値を取得できる
    • elem.style.color = "yellow" で値を上書きできる

  • class="div1_class" のようにclassで設定されている場合
    • elem.style.color
    • では取得できない
    • window.getComputedStyle(要素, 擬似要素)
    • で各プロパティの値を取得できる
    • 取得するだけで値の変更はできない



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<head>
  <style>
    .div1_class {
      color: blue;
    }
  </style>
</head>
<body>
  <div id="div1" class="div1_class">div1</div>
  <div id="div2" style="color:green;">div2</div>
  <textarea id="ta" style="width:240px;height:240px;"></textarea>
  <br>
  <button id="bt">button</button>
  <script>
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    var ta = document.getElementById("ta");
    var bt = document.getElementById("bt");
    bt.onclick = bt_clicked;

    var div1_style = window.getComputedStyle(div1, null);
    var div2_style = div2.style;

    function bt_clicked() {
      var way1 = div1_style.color;
      var way2 = div1_style.getPropertyValue("color");
      var way3 = div1.style.color;
      var way4 = div2_style.color;
      var result = [way1, way2, way3,  way4, JSON.stringify(div1_style)];
      ta.value = result
    }
  </script>
</body>
</html>
意訳
 



div1_classのスタイル
文字色




div1
div2
textarea

button

idがdiv1の要素を取得
idがdiv2の要素を取得
idがtaの要素を取得
idがbtの要素を取得
btがクリックされたらbt_clickedを実行する

div1でwindow.getComputedStyleを取得する
div2でstyleを取得する

この機能がやること
colorを取得する一つ目の方法
colorを取得する二つ目の方法
colorを取得する三つ目の方法
colorを取得する四つ目の方法
取得した4つの値とdiv1_styleをJSONにした結果を配列にして
taに入れる







buttonをクリックすると以下のような結果が出力されます


補足


way1, way2, way3,  way4

の結果は

rgb(0, 0, 255),rgb(0, 0, 255),,green


way1:window.getComputedStyle(div1, null).color
way2:window.getComputedStyle(div1, null).getPropertyValue("color")
の結果は<style></style>の中で設定されている blue をRGBで表した rgb(0, 0, 255) が返ってくる

way3:document.getElementById("div1").color
はタグ内で style が設定されていないので取得できない

way4:document.getElementById("div2").color
はタグ内で style="color:green" で設定された green が返ってくる


関連記事

スタイルを上書きしたい場合



参考

JavaScript Window getComputedStyle() Method
https://www.w3schools.com/jsref/jsref_getcomputedstyle.asp

window.getComputedStyle
https://developer.mozilla.org/ja/docs/Web/API/Window/getComputedStyle