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>