JS DOM CSS 和 DOM事件
声明
该文部分代码和内容节选自菜鸟教程，仅用作个人学习，特此声明
DOM CSS
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
1、改变 HTML 样式
改变 HTML 样式很简单，用这个语法就行了
document.getElementById("id").style.property(具体样式,如：color) = "新样式"
为了方便理解，我再举个简单的例子：改变p元素的样式
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<p id="p3">Hello World!</p>
<script>
document.getElementById("p1").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p3").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>
</body>
在上边的例子中，我们分别改变三个p元素样式为
蓝色字体，Arial字体，更大号的字体
2、使用事件
何谓事件？比如：按钮元素被点击啦，页面加载完成啦，输入框元素内容被修改啦......
这里我们先不详细学习事件，先举几个简单的例子理解一下事件
实例1：点击按钮后改变指定位置元素的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单事件举例</title>
</head>
<body>
<h1 id="id1">我的标题 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点我!</button>
</body>
</html>
如下图，点击按钮后，id为id1的h1标签元素样式被改变
再来一个简单的例子 style.visibility
实例2：点击按钮后实现文字的显示和隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单事件练习</title>
</head>
<body>
<p id="p1">这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。</p>
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />
</body>
</html>
如下图，点击隐藏文本按钮后p标签元素被隐藏
点击显示文本按钮后p标签元素被显示
通过以上实例简单了解事件，接下来，我们来详细学习一下JavaScript HTML DOM 事件
