JavaScriptをHTML DOMの変更CSS
HTML DOMは、JavaScriptがHTML要素のスタイルを変更することができます。
変更HTMLスタイル
HTML要素のスタイルを変更するには、次の構文を使用します。
document.getElementById(id).style.property=新样式
次の例では、スタイル<p>要素を変更します：
例
<！DOCTYPE HTML>
<HTML>
<ヘッド>
<メタ 文字セット = "UTF-8">
<タイトル> このチュートリアル（w3big.com）</タイトル>
</ HEAD>
<ボディ>
<P ID = "P1"> Hello Worldの ！</ P>
<P ID = "p2の"> Hello Worldの ！</ P>
<スクリプト>のdocument.getElementById（ "P2" ）style.color =のdocument.getElementById（ "P2"）;. "青" style.fontFamily = "Arialの"; ..のdocument.getElementById（ "P2"）style.fontSize = 「大きい」; </ script>の
<P> 上記の段落を変更することによって、スクリプト。 </ P>
</ BODY>
</ HTML>
»をお試しください
イベントを使用してください
HTML DOMは、私たちがイベントをトリガすることによって、コードを実行することができます。
たとえば、次のイベント：
- 要素がクリックされました。
- ページがロードされます。
- 入力ボックスが変更されます。
- ......
次のセクションでは、イベントの知識についての詳細を学びます。
この例では、ユーザーがボタンをクリックすると、スタイルID = "ID1" HTML要素を変更します。
例
<！DOCTYPE HTML>
<HTML>
<ボディ>
<H1 idが= "ID1">マイ見出し1 </ H1>
<ボタンタイプ= "ボタン"
onclickの= "のdocument.getElementById（ 'ID1'）。style.color = '赤'">
私を指す！</ボタン>
</ BODY>
</ HTML>
<HTML>
<ボディ>
<H1 idが= "ID1">マイ見出し1 </ H1>
<ボタンタイプ= "ボタン"
onclickの= "のdocument.getElementById（ 'ID1'）。style.color = '赤'">
私を指す！</ボタン>
</ BODY>
</ HTML>
»をお試しください
より多くの例
可視性
要素が見えないようにする方法。 要素は、あなたが表示または消えたいですか？