指定したHTML要素のstyleプロパティ値をJavaScriptを使って変更する
｜
styleプロパティ値をJavaScriptで変更する
HTML構文に付随されるCSS装飾は、CSSの記述だけで装飾できますが、動的なCSSを記述したい場合にはJavaScriptに記述することで処理することができます。
styleプロパティを変更したりする場合は、getElementByIdで変更したい要素に設定する必要があります。
■サンプル例
■ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> #haike { background-color:slategray; } </style> <p id="haike"> 変更先 </p> <p> <input type="button" value="クリック" onclick="changesyoku('darkorange');"> </p> <script> function changesyoku( newsyoku ) { document.getElementById('haike').style.backgroundColor = newsyoku; } </script> |
■ブラウザ表示
変更先
↓
変更先
■サンプル例
■ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> .waku { width: 100px; height: 100px; background: darkorange; } </style> <div id="henko" class="waku"></div> <script> document.getElementById('henko').addEventListener('click', function() { document.getElementById('henko').style.borderRadius = '30px'; }); </script> |
■ブラウザ表示
↓
■サンプル例
■ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> .waku { width: 100px; height: 100px; background: darkorange; } .kawari { background:#0066CC; border-radius:30%; } </style> <div id="henko" class="waku"></div> <script> document.getElementById('henko').addEventListener('click', function() { document.getElementById('henko').classList.add('kawari'); }); </script> |
■ブラウザ表示
↓