《HTML 5与CSS 3 权威指南(第4版·下册)》 —16.4.2 伪类选择器E:enabled与E:disabled

举报
华章计算机 发表于 2019/11/21 18:43:18 2019/11/21
【摘要】 本节书摘来自华章计算机《HTML 5与CSS 3 权威指南(第4版·下册)》一书中第16章,第16.4.2节,作者是陆凌牛。

16.4.2 伪类选择器E:enabled与E:disabled

E:enabled伪类选择器用来指定当元素处于可用状态时的样式。

E:disabled伪类选择器用来指定当元素处于不可用状态时的样式。

当一个表单中的元素经常在可用状态与不可用状态之间进行切换时,通常会将

E:disabled伪类选择器与E:enabled伪类选择器结合使用,用E:disabled伪类选择器来设置该元素处于不可用状态时的样式,用E: enabled伪类选择器来设置该元素处于可用状态时的样式。

代码清单16-19中给出了一个将E:disabled伪类选择器与E:enabled伪类选择器结合使用的示例,在该示例中有两个radio单选框与一个文本框,在JavaScript脚本中编写代码,当用户选中其中一个radio单选框时,文本框变为可用状态,选中另一个radio单选框时,文本框变为不可用状态。通过结合使用E: disabled伪类选择器与E:enabled伪类选择器,让文本框处于不同的状态时分别使用不同的样式。

代码清单16-19 E: disabled伪类选择器与E: enabled伪类选择器结合使用的示例

image.png

image.png

这段代码的运行结果可分为如下两种情况:

文本框处于可用状态时的页面显示如图16-28所示(背景色为黄色)。

文本框处于不可用状态时的页面显示如图16-29所示。

            image.png

图16-28 代码清单16-19的运行结果(文本框处于可用状态时)   图16-29 代码清单16-19的运行结果(文本框处于不可用状态时)


【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。