要素のスタイルを取得する時に 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
