最新的Web开发教程
 

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

<p>The paragraph above was changed by a script.</p>

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

使用Events

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

事件由时“的事情发生”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 Style对象参考手册

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


自测练习用!

练习1» 练习2» 练习3» 练习4» 练习5»