JavaScript 学习笔记 24 - DOM HTML - 改变元素

教材来自<<菜鸟学堂>>

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

改变 HTML 输出流

<script>
    document.write(Date());
</script>

注意：绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容

<p id="p1">Hello World!</p>
<h1 id="header">Old Header</h1>
<script>
    document.getElementById("p1").innerHTML="新文本!";
    document.getElementById("header").innerHTML="新标题";
</script>

改变 HTML 属性

<img id="image" src="smiley.gif">
<script>
    document.getElementById("image").src="landscape.jpg";
</script>

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

改变 HTML 样式

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
    document.getElementById("p2").style.color="blue";
    document.getElementById("p2").style.fontFamily="Arial";
    document.getElementById("p2").style.fontSize="larger";
</script>