码农教程 - 一技在手,衣食无忧! tools

目录

JavaScript HTML DOM - 更改 CSS

❮ 上一节 下一节 ❯

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

更改 HTML 样式

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

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

以下示例更改了 a 的样式<p>元素：

示例

<html>
<body>

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

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

</body>
</html>
亲自试一试 »

使用事件

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

当 "things happen" 为 HTML 元素时，浏览器会生成事件：

  • 单击一个元素
  • 页面已加载
  • 输入字段已更改

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

此示例更改 HTML 元素的样式id="id1"，当用户单击按钮时：

示例

<!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>
亲自试一试 »

更多示例

能见度如何使元素不可见。您是否要显示该元素？

HTML DOM 样式对象参考

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

通过练习测试一下

练习:

更改文本颜色<p>元素为"red"。

<p id="demo"></p>

<script>
document.getElementById("demo") = "red";
</script>

开始练习

❮ 上一节 下一节 ❯