HTML DOM - HTML要素の変更
HTML要素は、JavaScript、HTML DOM、およびイベントを使用して変更できます。
HTML要素の変更
HTML DOMとJavaScriptは、HTML要素の内側の内容と属性を変更できます。
次の例は、<body>要素の背景色を変更します:
例
<html>
<body>
<script type="text/javascript">
document.body.bgColor="lavender";
</script>
</body>
</html>
|
Try it yourself »
|
HTML要素のテキスト変更 - innerHTML
要素内容の取得、または変更する最も簡単な方法は、innerHTMLプロパティを使用することです。
次の例は、<p>要素のテキストを変更します:
例
<html>
<body>
<p id="p1">Hello World!</p>
<script type="text/javascript">
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
|
Try it yourself »
|
イベントを用いたHTML要素の変更
イベントハンドラは、イベントが発生した時に、コードが実行できようにします。
イベントは、ユーザーが要素をクリックした時、ページがロードされた時、
フォームがサブミットされた時などに、ブラウザにより生成されます。
イベントに関しては、次章で更に学習します。
次の例は、ボタンをクリックすると<body>要素の背景色が変ります:
例
<html>
<body>
<input type="button" onclick="document.body.bgColor='lavender';"
value="Change background color" />
</body>
</html>
|
Try it yourself »
|
要素のテキスト変更 - 関数による
次の例は、ボタンをクリックしたときに、<p>要素のテキストを変更するために関数を使用します:
例
<html>
<head>
<script type="text/javascript">
function ChangeText()
{
document.getElementById("p1").innerHTML="New text!";
}
</script>
</head>
<body>
<p id="p1">Hello world!</p>
<input type="button" onclick="ChangeText()"
value="Change text" />
</body>
</html>
|
Try it yourself »
|
スタイルオブジェクトの使用
各HTML要素のスタイルオブジェクトは、個々のスタイルを表しています。
次の例は、ボタンをクリックしたときに、<body>要素のスタイルを変更するために関数を使用します:
例
<html>
<head>
<script type="text/javascript">
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
</head>
<body>
<input type="button" onclick="ChangeBackground()"
value="Change background color" />
</body>
</html>
|
Try it yourself »
|
要素のフォントと色の変更
次の例は、ボタンをクリックしたときに、<p>要素のスタイルを変更するために関数を使用します:
例
<html>
<head>
<script type="text/javascript">
function ChangeStyle()
{
document.getElementById("p1").style.color="blue";
document.getElementById("p1").style.fontFamily="Arial";
}
</script>
</head>
<body>
<p id="p1">Hello world!</p>
<input type="button" onclick="ChangeStyle()"
value="Change style" />
</body>
</html>
|
Try it yourself »
|
|