JavaScript HTML DOM - 改变CSS_JSHTMLDOM


JavaScript HTML DOM - 改变CSS


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


一、改变 HTML 样式

如需修改 HTML 元素的样式,可以使用下面语法:

document.getElementById(id).style.property=样式 style

你可以通过下面的例子能改变 <p> 元素的样式:

示例代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS5.NET教程(css5.net)</title>

</head>

<body>


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

<p>脚本修改。</p>


</body>

</html>


演示一下 ?

二、使用事件

HTML DOM 允许事件触发时执行代码。

比如以下事件:

  • 点击元素时。页面完成加载。输入框被更改。

  • 你可以在此章节中,你会学到更多相关事件的知识。

用户在点击按钮时,改变了 id="id1" 的 HTML 元素的样式:

示例代码

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">这是我的标题 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
点击我!</button>

</body>
</html>

演示一下 ?



三、更多示例代码

Visibility
如何使元素不可见。您愿望元素显示或隐藏吗?


Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16