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这个类

他就会帮我加上

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Suyuoa

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值