JS DOM CSS 和 DOM事件

声明

该文部分代码和内容节选自菜鸟教程，仅用作个人学习，特此声明

链接：https://www.runoob.com/

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>