LANG SELRCT

Google Apps Scriptのコードを書く場所  (新規作成: スプレッドシート | スクリプトエディタ

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に変える







最新の投稿

JIRA APIで選択リスト(複数選択)を課題作成時に選択してPOSTしたい

JIRA APIを利用して選択リスト(複数選択)フィールドに値を入れたくて書いたコードです。 コード.gsのこの部分で複数選択の値を選択できました。 customfield_10043 は手元のJIRAでの選択リスト(複数選択)のフィールドIDなので、各自の環境によって異なります...