LANG SELRCT

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

2018年1月3日水曜日

.classNameと.style.propertyでスタイルを変える


JavaScriptでスタイルを変更する際に以下2つの方法を使っていました
  1. element.className = "クラス名";
  2. 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に変える