JavaScriptでスタイルを変更する際に以下２つの方法を使っていました
- element.className = "クラス名";
- element.style.property = "変更後の値";
上記を混ぜて使うと2つめの方が優先されるようです
ここでのelementは
var element = document.getElementById("ID");
などで取得した対象の要素
ここでのpropertyは
color や display や width など
試してみる
以下のそれぞれのボタンをクリックすると 対象の要素 の文字色が変わります
対象の要素
要素にstyleが設定されているとclass名の指定よりも優先されるため
element.style.color = "purple" を先にクリックすると
element.className = "text_green" をクリックしても文字色は変わらない
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html>
<html>
<style>
.text_green {
color: green;
}
</style>
<body>
<div id="div1">対象の要素</div>
<button id="bt_class_name">element.className = "text_green"</button>
<button id="bt_style_color">style.color = "purple"</button>
<script>
document.getElementById("bt_class_name").onclick = bt_class_name_clicked;
document.getElementById("bt_style_color").onclick = bt_style_color_clicked;
var div = document.getElementById("div1");
function bt_class_name_clicked() {
div.className = "text_green";
}
function bt_style_color_clicked() {
div.style.color = "purple";
}
</script>
</body>
</html>
|
意訳これはHTML5文書です テキストの色をgreenにする div要素を置く ボタンを置く（idはbt_class_name） ボタンを置く（idはbt_style_color） idがbt_class_nameをクリックしたらbt_class_name_clickedを実行する idがbt_style_colorをクリックしたらbt_style_color_clickedを実行する idがdiv1の要素を取得する この機能がやること idがdiv1の要素のclass名をtext_greenに変える この機能がやること idがdiv1の要素のsytyleのcolorをpurpleに変える |
