利用DOM操作表单元素的属性-仿小米登录案例

最新推荐文章于 2024-08-23 10:53:05 发布

前端小胖虎

最新推荐文章于 2024-08-23 10:53:05 发布

阅读量140

点赞数

文章标签： html javascript html5

本文链接：https://blog.csdn.net/weixin_43188011/article/details/120342090

版权

本文通过仿小米登录案例，介绍如何利用DOM操作HTML表单元素的属性，实现点击按钮切换密码框为文本框，展示密码明文的功能。文章包括案例分析、实战代码，分别涵盖CSS、HTML和JavaScript部分。

摘要由CSDN通过智能技术生成

利用DOM操作表单元素的属性

表单元素的属性有：type,value,checked,selected,disabled

点击按钮，将密码框切换为文本框，并可以查看密码明文
小米登录页面

1：核心思路：点击眼睛按钮，把密码类型改为文本框可以看到里面的密码。
2：一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框。
3：算法：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，然后将flag设置为0，如果是0就切换为密码框，flag设置为1。

【CSS部分】

div{
   
         position: relative;
         width: 400px;
         border-bottom: 1px solid rgb(59, 55, 55);
         margin:

关注