html行为样式动作是啥,Javascript DOM基础操作：样式与事件（下）

上两篇介绍了DOM的概念以及一些DOM控制HTML标签的查增删改的基础操作，这些是不够的，因为我们的目的是让页面有颜值有灵魂(好看以及有趣的行为)，这就需要通过CSS样式和事件处理来体现。

改变CSS样式

HTML 元素的样式是通过style属性和对应的属性值来控制的，DOM允许js可以操控style的属性和属性值，从而来达到改变其样式的目的。当然，改变样式的前提依然是要先获取到目标元素，然后通过点操作符来找到style属性和属性值。

document.getElementById(id).style.property = new style

接下来看一个例子，将h1标签的颜色变成红色：

document.getElementsByTag(“h1”).style.color = “red”;

需要注意的是css中的两字符和js中的减号运算符长得一样，所以为了避免引起奇异，一些带有连字符的css样式要转换成对应的小驼峰命名的名字。比如font-size,background-color应该写成

document.getElementsByTag(“h1”).style.fontSize="16px";

document.getElementsByTag(“h1”).style.backgroundColor = "blue";

当然，我们可以通过控制display 和visible的值来控制元素的显示和掩藏：

document.getElementsByTag(“h1”).style.display = "none";

document.getElementsByTag(“h1”).style.display = "block";

通过增加js的逻辑，以及更丰富的CSS3属性，可以打造更加酷炫的页面交互效果。

事件处理

CSS决定页面的颜值，而事件处理决定页面的交互，有趣的灵魂就靠它了。HTML DOM 允许 Javascript 添加和处理多种事件。比如页面加载事件、鼠标点击、鼠标移动、输入字段更改。

给元素添加事件的基本方式是，直接将事件卸载HTML代码中，但是这样低效，而且不符合 内容、样式和行为分隔的原则。用JS DOM的好处显而易见，可以精准的批量添加元素，实现行为和内容的完全分离。这个就要用到添加事件监听器：addEventListener。

addEventListener() 方法用于向指定元素添加事件句柄。用法介绍：

element.addEventListener(event, function, useCapture);

参数1：event，字符串类型，必选，指定事件类型，比如click,change等；

参数2：function，指定要事件触发时执行的函数，或者直接是函数定义本身；

参数3：可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

比如：

document.getElementByClassName(“btn”).addEventListener('click', clickEvent);

这里我们给多有带btn类的元素添加了点击事件(click)，在单击这些元素时就是执行 clickEvent方法。

当然还可以给一个元素添加多个不同的事件。如果元素不再需要这个事件，可以通过 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

总结：三篇从定义，内容结构(HTML)、颜值(CSS样式)、灵魂(事件行为)等三个方面，介绍了一些基础的DOM操作，可以让大家了解其中原理和一些基础的操作，有这个基础，可以扩展更多的具体方法，将十八般武器好好练熟，再具体的项目中，就可以发挥想象力，大展身手了。

举报/反馈