JavaScript DOM CSS


目录

    显示目录


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


更改 HTML 样式

要更改 HTML 元素的样式,请使用以下语法:

document.getElementById(id).style.property = new style

以下示例更改 <p> 元素的样式:

例子

<html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
</script>

</body>
</html>

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Changing the HTML style:</p>


<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>


</body>
</html>

使用事件

HTML DOM 允许您在事件发生时执行代码。

当 HTML 元素发生“事情”时,浏览器会生成事件:

  • 单击一个元素

  • 页面已加载

  • 输入字段已更改

您将在本教程的下一章中了解有关事件的更多信息。

此示例使用 id="id1" 更改 HTML 元素的样式,当 用户单击按钮:

例子

<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>

<button type="button" 
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
</body>
</html>

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>

<button type="button" 
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>

</body>
</html>


更多示例

能见度

<!DOCTYPE html>
<html>
<body>

<p id="p1">
This is a text.
This is a text.
This is a text.
This is a text.
</p>

<input type="button" value="Hide text" onclick="document.getElementById('p1').style.visibility='hidden'">
<input type="button" value="Show text" onclick="document.getElementById('p1').style.visibility='visible'">

</body>
</html>

HTML DOM 样式对象参考

对于所有 HTML DOM 样式属性,请查看我们完整的 HTML DOM 样式对象参考。