getElementByIdなどを使った要素の取得方法まとめ

htmlで定義したclassやdiv要素の取得方法

動的にhtmlで定義したclassやdiv要素を変えたい場合がありますが、
その要素を取得するには、documentのgetElementById関数を使用する方法があります。

例としてdivの要素取得し、font-sizeを変更するコードを書きます。
getElementById("div id名")で要素を取得します。 そして、cssで言うところのfont-sizeにアクセスするためには、
styleにアクセスし、その中のfontSizeの要素を変更します。


<div id="test">
  test
</div>

<script type="text/javascript">
var test = document.getElementById("test");
test.style.fontSize = 32;
</script>
   			

styleの一覧

cssの属性を変更するためには、styleを変更することで実現できます。
styleの一覧はjavascriptのdebug画面からstyleの要素を閲覧できるので、
そこで全ての要素を確認することができます。
以下の図のような感じで一覧にアクセスすることができます。

クラス要素へのアクセス

クラス要素を取得する場合は、document.getElementsByClassName関数があります。
名前にElementsとあるように、classなので複数存在することを想定しています。
indexを使用することにより、定義された順番で対象のクラスにアクセスすることができます。


<div class="test">
test
</div>

<script type="text/javascript">
var test = document.getElementsByClassName("test")[0];
test.style.fontSize = 32;
</script>
		    
このエントリーをはてなブックマークに追加