在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对象参考 。