21.操作元素

操作元素实际上是修改元素中的属性，展示的图像就修改图像路径属性src，基本所有的属性都能改，包括元素的类，ID这种，我们下面举几个例子

目录

1 修改元素内容

2  读取元素内容

3  图像切换

4  分时问候案例

5  修改表单元素属性

6  密码框的明文密文切换

7  修改样式属性

7.1  element.style

7.2  element.className

8  关闭广告效果

9  循环设置精灵图

10  聚焦文本框时文本框中默认内容消失

11  文本框格式提示错误信息

12  排他思想

13  鼠标经过表格高亮效果

14  表单全选与取消全选案例

15  获取元素类名列表 element.classList

15.1  添加一个类名 element.classList.add()

15.2  移除一个类名 element.classList.remove()

15.3  切换类名 element.classList.toggle()

---

1 修改元素内容

有两个属性可以修改元素的内容，innerText与innerHTML

我们先搞一个页面

innerText不会执行内容中的HTML标签

innerHTML会执行内容中的HTML标签，一般我们使用innerHTML

2  读取元素内容

可以通过innerText或innerHTML获取元素中的内容

innerText只能获取界面上能看到的信息，innerHTML会获取代码中的所有内容信息

3  图像切换

我们通过改变src来改变图像的内容

两张图像在与代码相同的目录下

一开始是这样的

点一下CSS3按钮是这样的

点一下JavaScripta按钮是这样的

4  分时问候案例

我们定义6-11点多为上午，12-17点多为下午，其余时间为晚上，根据不同时间显示不同问候语与不同的图像

我当前是上午，所以返回了这个页面

现在到了下午刷新一下会显示这个页面

5  修改表单元素属性

比如修改input中的value

打开后是这样的

点一下后变成这样

如果使用innerHTML就不行了，因为input的innerHTML属性不是干这个用的

也可以修改disabled，disabled默认为false，我们想点击按钮后用户不再能操作输入框

刷新点击按钮后，输入框呈灰色，无法再操作输入框

6  密码框的明文密文切换

打开后我们输入123

点一下按钮

再点一下按钮

7  修改样式属性

7.1  element.style

如果只改一两个可以使用属性名来直接搞，比如我现在想改div的宽度

打开后是这样的

按下按钮之后是这样的

或者这样写

效果是一样的

不过这样并不是所有属性的命名方式都与之前相同，比如background-color

通过这种方式修改背景颜色应该这样写，属性名采用的是驼峰命名法

这样点完按钮可以变换颜色

由于属性名的不同所以不建议使用这种写法

这种方式CSS权重为行内样式，如果CSS中有高于行内样式的权重是改不了的，比如!important

7.2  element.className

如果改的属性较多的话建议直接改类名

打开后

点击后

如果元素以前有别的类名再次设置会被覆盖，也就是说以前类名的样式就都没有了，如果想搞两个类名要把之前的也写上

打开后是这样的

点一下按钮之后是这样的

用这种方法也可以设置多个类名

8  关闭广告效果

打开页面之后的样子

我们点一下右上角的叉

刷新后再次出现图像

9  循环设置精灵图

我们现在有一个精灵图

在没有JS的情况下想要搞成这样只能一个一个设置

通过JS我们可以循环设置，当然前提是精灵图需要有摆放的规律

10  聚焦文本框时文本框中默认内容消失

目前单用CSS是无法隐藏value的，所以用foucs这个伪状态是做不了的

所以我们要用两种事件类型

• 获得焦点事件 onfocus
• 失去焦点事件 onblur

这里注意value是属性而不是样式，所以用style的方法是改不了的，value这个属性可以读写

打开之后是这样的

获取焦点后是这样的

如果不输入内容，失去焦点后是这样的

输入内容后颜色会变黑

输入之后失去焦点会保留原有的状态

11  文本框格式提示错误信息

css

html

JS

打开后是这样的

聚焦一次后显示提示信息

此时失去焦点后依然显示提示信息

输入不符合条件的密码后失去焦点的情况

输入符合条件的密码后失去焦点的情况

12  排他思想

轮播图下方的按钮的样式需要用到排他思想，当一个按钮被点击后改变自身颜色，但其他按钮颜色保持默认状态

可以这样做

这样就会点谁谁变色

13  鼠标经过表格高亮效果

单用CSS可以实现

CSS

HTML

这样鼠标放上是可以变色的

如果我们用JS，那么会使用到两个事件。鼠标经过事件onmouseover，鼠标离开事件onmouseout

这样我们将鼠标移动上去就是高亮，移动走就恢复原状

14  表单全选与取消全选案例

CSS

HTML

JS

点击全选

再点击全选

将下面三个选中后，全选按钮自动选中

取消下面三个任意一个的选中状态，全选按钮自动取消选中

我上面写的all_check()函数有更巧妙的写法，思路是取消了判断，让下面三个与全选按钮状态保持一致

judge_select也有另一种写法，思路先设置一个flag为true，如果循环结束没有没选中的就不会改变flag，如果有一个为没选中的flag就为false

15  获取元素类名列表 element.classList

classList是ie10以上的方法

我们先看元素只有一个类名的情况

之后我们再看有多个类名的情况

我们可以对我们获取的类名列表进行一些操作

15.1  添加一个类名 element.classList.add()

我们定义一个样式以验证是否添加成功

• 直接写添加的类名就可以了，不需要加点

发现可以成功添加

15.2  移除一个类名 element.classList.remove()

发现可以成功移除

15.3  切换类名 element.classList.toggle()

切换的意思是 如果你切换前有指定的类名，那么就给你删掉。如果你切换前没有指定的类名，那么就给你加上

我当前有three这个类，它就会帮我删掉

我当前没有four这个类

他就会帮我加上