【Web APIs】JavaScript 操作元素 ④ ( 修改元素属性示例 | 密码表单标签结构 | 密码输入框样式设置 | 右侧图标按钮设置 | JavaScript 修改元素属性示例 )

于 2024-08-01 09:18:57 发布
阅读量656 收藏 14
点赞数 7
分类专栏： JavaScript 文章标签： 前端 javascript 开发语言 Web APIs DOM CSS HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shulianghan/article/details/140805308
版权

文章目录

JavaScript 中 可以通过 DOM ( 文档对象模型 ) 操作 来 修改网页的 内容 , 结构 , 样式 , 属性 ;


在 【Web APIs】JavaScript 操作元素 ① ( 修改元素内容 | innerText 属性修改元素文本内容 | innerHTML 属性修改元素 HTML 内容 ) 博客中介绍了 使用

  • innerText 属性
  • innerHTML 属性

修改 DOM 元素标签内容的 ;


在 【Web APIs】JavaScript 操作元素 ② ( 修改元素属性 | 直接访问属性 | 使用setAttribute、getAttribute 和 removeAttribute访问属性 ) 博客介绍 通过 DOM 操作 修改元素属性 ;

在 【Web APIs】JavaScript 操作元素 ③ ( 修改表单元素属性 | 表单常用属性 | 表单常用属性修改示例 ) 博客介绍 通过 DOM 操作 修改表单元素属性 ;





一、案例需求


实现一个密码输入框 , 点击右侧按钮可以显示密码 , 再次点击就隐藏密码显示 ;

在这里插入图片描述





二、关键要点



1、密码表单标签结构


密码表单 , 就是将 input 表单标签设置 type 类型为 password ,

<input type="password" name="" id="">

右侧的 眼镜图标 使用 label 标签实现 , 将 input 表单 和 label 放在同一个 div 盒子中 , 并为 div 盒子设置 box 类名 ;

    <div class="box">
        <label for=""></label>
        <input type="password" name="" id="">
    </div>

默认样式如下 :
在这里插入图片描述
在这里插入图片描述


2、设置盒子样式


设置盒子水平居中 : 设置 div 盒子模型的 margin 属性 ,

  • 第一个参数表示上下的外边距 , 设置 100 像素 ;
  • 第二个参数 auto 表示水平方向居中 ;
            /* 上下间距 100 像素，左右自动居中 */
            margin: 100px auto;

设置盒子相对定位 : 盒子模型 内部 需要将 图片 使用绝对定位定位到 右侧 垂直居中 位置 , 则 子元素 绝对定位 , 父容器 必须设置 相对定位 , " 子绝父相 " 原则 ;

            /* 相对定位，相对于其正常位置进行定位 */
            position: relative;

部分代码示例 :

        .box {
            /* 设置外部div的样式 */
            /* 相对定位，相对于其正常位置进行定位 */
            position: relative;
            /* 宽度为 400 像素 */
            width: 400px;
            /* 底部边框为 1 像素实线，颜色为灰色 */
            border-bottom: 1px solid #ccc;
            /* 上下间距 100 像素，左右自动居中 */
            margin: 100px auto;
        }

下图红色矩形框就是 div 盒子模型的范围 , 中间的输入框是 div 内部的 input 表单 ;

在这里插入图片描述


3、密码输入框样式设置


密码输入框样式设置 :

设置 输入框 的 宽度为 370 像素 , 高度设置为 30 像素 , 右侧的 小图标 大小 预留 30 x 30 像素的位置 , 设置后的样式如下 :
在这里插入图片描述

设置 border 属性 , 将边框宽度设置为 0 , 就可以取消上述边框 ;

            /* 去掉边框 */
            border: 0;

取消边框后的样式 , 边框在默认时不显示 , 但是将光标移动到 输入框后 , 有一层选中 外边框显示出来 ;

在这里插入图片描述

设置 outline: none 属性 , 可以取消光标选中后的外边框 ;

            /* 去掉默认的外边框样式 */
            outline: none;

取消外边框的样式如下 :

在这里插入图片描述


部分代码示例 :

	.box input {
            /* 设置 .box 内的输入框样式 */
            /* 输入框宽度为370像素 */
            width: 370px;
            /* 输入框高度为30像素 */
            height: 30px;
            /* 去掉边框 */
            border: 0;
            /* 去掉默认的外边框样式 */
            outline: none;
        }

4、右侧图标按钮设置


设置 右侧 图标按钮 img 标签元素 , 在 label 标签中添加 img 标签子元素 ;

    <div class="box">
        <label for="">
            <img src="images/open.png" alt="" id="eye">
        </label>
        <input type="password" name="" id="">
    </div>

默认的样式如下 :
在这里插入图片描述

设置 img 标签的 样式 , 要将 img 标签设置到 div 容器的右侧 , 并且必须脱离标准流 , 可以使用 浮动 , 定位 两种方式 , 这里使用 绝对定位 设置该 img 标签位置 ;

将图片放置在 布局右侧 , 距离顶部 和 右侧 各 2 像素 , 如果将 图片大小设置为 24x24 像素 , 则底部距离图片也有 2 像素 ;

            /* 绝对定位，相对于最近的非static定位父元素 */
            position: absolute;
            /* 距离父元素顶部 2 像素 */
            top: 2px;
            /* 距离父元素右侧 2 像素 */
            right: 2px;

设置的效果如下 :
在这里插入图片描述

设置 img 标签大小为 24 x 24 像素 , 即可实现如下效果 :

            /* 图片宽度高度为24像素 */
            width: 24px;
            height: 24px;

在这里插入图片描述


5、盒子模型右侧图标按钮设置


部分代码示例 :

        .box {
            /* 设置外部div的样式 */
            /* 相对定位，相对于其正常位置进行定位 */
            position: relative;
            /* 宽度为 400 像素 */
            width: 400px;
            /* 底部边框为 1 像素实线，颜色为灰色 */
            border-bottom: 1px solid #ccc;
            /* 上下间距 100 像素，左右自动居中 */
            margin: 100px auto;
        }
        
        .box input {
            /* 设置 .box 内的输入框样式 */
            /* 输入框宽度为370像素 */
            width: 370px;
            /* 输入框高度为30像素 */
            height: 30px;
            /* 去掉边框 */
            border: 0;
            /* 去掉默认的外边框样式 */
            outline: none;
        }
        
        .box img {
            /* 设置 .box 内的图片样式 */
            /* 绝对定位，相对于最近的非static定位父元素 */
            position: absolute;
            /* 距离父元素顶部 2 像素 */
            top: 2px;
            /* 距离父元素右侧 2 像素 */
            right: 2px;
            /* 图片宽度高度为24像素 */
            width: 24px;
            height: 24px;
        }




三、JavaScript 修改元素属性示例


首先 , 获取 DOM 元素 ;

然后 , 设置 flag 标志位 , 用于记录 当前 密码表单的状态 , 如果当前值为 0 说明是 密码状态 , 此时 密码是隐藏的 , 如果当前值为 1 说明是 文本状态 , 此时 密码是显示的 ;

最后 , 设置 DOM 元素的 点击事件 , 根据 flag 值 设置 密码表单 的显示样式 ;


不分代码示例 :

        // 1. 获取 DOM 元素
        // 获取页面中第一个 img 元素
        var show_password = document.querySelector('img');
        // 获取页面中第一个 input 元素
        var password = document.querySelector('input');

        // 2. 注册事件处理程序
        // 定义一个标志位，用于记录密码显示状态，默认为隐藏状态
        var flag = 0;
        show_password.onclick = function() {
            // 点击一次之后，flag 一定要变化
            if (flag == 0) {
                // 如果密码是隐藏状态 , 点击按钮显示密码
                // 将密码字段的类型设置为文本，以显示密码内容
                password.type = 'text';

                // 更换显示密码的图标为“打开眼睛”的图标
                show_password.src = 'images/open.png';

                // 更新标志位，表示密码现在是显示状态
                flag = 1;
            } else {
                // 如果密码是显示状态 , 点击按钮隐藏密码
                // 将密码字段的类型重新设置为密码，隐藏密码内容
                password.type = 'password';

                // 更换显示密码的图标为“关闭眼睛”的图标
                show_password.src = 'images/close.png';

                // 更新标志位，表示密码现在是隐藏状态
                flag = 0;
            }
        }




四、完整代码示例


完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style>
        .box {
            /* 设置外部div的样式 */
            /* 相对定位，相对于其正常位置进行定位 */
            position: relative;
            /* 宽度为 400 像素 */
            width: 400px;
            /* 底部边框为 1 像素实线，颜色为灰色 */
            border-bottom: 1px solid #ccc;
            /* 上下间距 100 像素，左右自动居中 */
            margin: 100px auto;
        }
        
        .box input {
            /* 设置 .box 内的输入框样式 */
            /* 输入框宽度为370像素 */
            width: 370px;
            /* 输入框高度为30像素 */
            height: 30px;
            /* 去掉边框 */
            border: 0;
            /* 去掉默认的外边框样式 */
            outline: none;
        }
        
        .box img {
            /* 设置 .box 内的图片样式 */
            /* 绝对定位，相对于最近的非static定位父元素 */
            position: absolute;
            /* 距离父元素顶部 2 像素 */
            top: 2px;
            /* 距离父元素右侧 2 像素 */
            right: 2px;
            /* 图片宽度高度为24像素 */
            width: 24px;
            height: 24px;
        }
    </style>

</head>

<body>
    <div class="box">
        <label for="">
            <img src="images/close.png" alt="" id="">
        </label>
        <input type="password" name="" id="">
    </div>

    <script>
        // 注意 : HTML 文档加载顺序是从上到下加载 
        // 这里要先加载标签 , 然后加载 JavaScript 脚本

        // 页面加载后 , 会自动执行该 JavaScript 脚本

        // 1. 获取 DOM 元素
        // 获取页面中第一个 img 元素
        var show_password = document.querySelector('img');
        // 获取页面中第一个 input 元素
        var password = document.querySelector('input');

        // 2. 注册事件处理程序
        // 定义一个标志位，用于记录密码显示状态，默认为隐藏状态
        var flag = 0;
        show_password.onclick = function() {
            // 点击一次之后，flag 一定要变化
            if (flag == 0) {
                // 如果密码是隐藏状态 , 点击按钮显示密码
                // 将密码字段的类型设置为文本，以显示密码内容
                password.type = 'text';

                // 更换显示密码的图标为“打开眼睛”的图标
                show_password.src = 'images/open.png';

                // 更新标志位，表示密码现在是显示状态
                flag = 1;
            } else {
                // 如果密码是显示状态 , 点击按钮隐藏密码
                // 将密码字段的类型重新设置为密码，隐藏密码内容
                password.type = 'password';

                // 更换显示密码的图标为“关闭眼睛”的图标
                show_password.src = 'images/close.png';

                // 更新标志位，表示密码现在是隐藏状态
                flag = 0;
            }
        }
    </script>
</body>

</html>

执行效果 :

在这里插入图片描述

韩曙亮
关注
  • 7
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
JavaScript 自定义属性操作
猿码互联
05-28 507
在 JavaScript 中，可以使用自定义属性来存储与元素相关的数据。自定义属性允许开发人员在元素上存储任何类型的数据，包括字符串、数字、对象等。接下来，我将详细解析如何在 JavaScript 中操作自定义属性，并提供相应的代码示例。总结： 自定义属性允许在 JavaScript 中添加、获取、删除和检查属性，可以存储任何类型的数据，包括对象。但需要注意的是，自定义属性并不是原生 HTML 属性，应该遵循。要访问存储的对象，可以先获取自定义属性的值，然后使用。是自定义属性的命名规则，
JavaScript语言之webAPIs篇
weixin_50939386的博客
04-05 3230
JavaScript语言之DOM篇 DOM 页面文档对象模型 认识DOM DOM树 ​ 含义： 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树 描述网页内容关系的名词 作用：文档树直观的体现了标签与标签之间的关系 ​ DOM对象 ​ 1. 含义：浏览器根据html标签生成的 JS对象 所有的标签属性都可以在这个对象上面找到 修改这个对象的属性会自动映射到标签身上 ​ ​ 2. DOM的核心
js给元素设置属性,js设置自定义属性
wenangou的博客
10-23 335
英文名object，翻译成中文就是对象。用英语的角度来说object就是物体实体，即使他看不见摸不着Python中的所有运算符号。中文的对象指的是女朋友。在计算机中，用英语的角度理解对象，就是说：放在内存里面的复杂数据集合，也叫做数据与方法的封装，是一种编程逻辑概念。函数是对数据与代码的封装，假如再把函数及函数外的数据进行封装，那就是object，即对象。
JavaScript如何修改元素？
m0_50272558的博客
09-17 387
修改元素 （1）修改内容 （2）修改样式 （1）修改内容 通过innerText属性可读取或者设置标签的内部文本也可以通过innerHTML属性获取或者设置内部文本 两者 的区别：innerHTML会按照html的规则来解析文本，而innerText只是当则普通的文本内容。 如果非要用innerText来换行，使用文本换行符\n （2）修改样式 A . xxx . style . yyy B . xxx . classname=”…………”（相当是修改了class属性） ...
JS修改元素属性
热门推荐
Ghjkku的博客
06-05 13万+
JS修改元素属性
JavaScript进阶——操作元素属性
m0_57184906的博客
03-19 872
可以通过 JS 设置／修改标签元素属性，比如通过 src 更换图片最常见的属性比如： href 、 title 、 src 等可以通过 JS 设置／修改标签元素的样式属性。
html5支付宝手机支付密码输入框特效
11-11
此外，考虑到安全性，特效可能还采用了防止屏幕截屏或录屏的技术，比如利用Web APIs检测屏幕截图行为，或者在密码输入时模糊屏幕其他部分。还有可能使用了HTML5的离线存储功能，如Web Storage（包括localStorage和...
Titanium-Appcelerator-Mobile-App:SimpleSample ToDo移动应用程序| Android | 钛制加速器
05-12
1. **Titanium SDK**：钛制加速器的核心是Titanium SDK，它提供了APIs和工具，使得开发者可以使用JavaScript来操作设备功能，如相机、GPS、联系人等。SDK也支持Titanium Alloy，这是一个MVC（模型-视图-控制器）框架...
web前端开发之JavaScript
hu0708的博客
08-18 2533
JavaScript
Javascript
weixin_43460646的博客
08-14 1014
本博客主要为黑马程序员网课中关于 JS 模块（网课在下面有介绍）所整理记录的学习笔记，仅作学习用途，如有侵权，烦请联系本人侵删。同时感谢黑马老师们的辛苦教导付出，如有不足之处，欢迎各位小伙伴、官老爷们多多提意见或建议，感谢！ JS入门到精通、DOM BOM操作、jQuery案例精讲、AJAX node.js webpack git一套全覆盖 一、JS基础 了解变量、数据类型、运算符等基础概念，能够实现数据类型的转换，结合四则运算体会如何编程。 体会现实世界中的事物与计算机
JavaScript操作DOM实现页面元素更改
最新发布
h1008685的博客
04-27 1018
JavaScript操作DOM实。现页面元素更改,dom讲解，通过dom-api操作页面元素。源码详解，实例解析，代码结构及作用，页面样式
JS 修改元素属性的六种方式
boonyaxnn的博客
04-04 3万+
方式一、 1.setAttribute 描述：设置元素的【属性】 语法：元素名.setAttribute('属性','属性值'); 例子： box.setAttribute('style','background-color:red;height:400px'); 注意：设置的是行内样式 2.getAttribute 描述：获取属...
js修改标签样式的8种方式，5分钟就能搞定
03-21 3193
如果属性有’-'号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式。4.使用setProperty 如果要设置!important，推荐用这种方法设置第三个参数。因JS获取不到css的伪元素，所以可以通过改变伪元素父级的class来动态更改伪元素的样式。1.直接设置style的属性 某些情况用这个设置!2.直接设置属性（只能用于某些属性，相关样式会自动识别）5.改变class 比如JQ的更改class相关方法。7.创建引入新的css样式文件。3.设置style的属性。
js获取当前元素的属性和设置当前元素的属性
祎祎的博客
12-30 3503
js的dom的操作方法
JavaScript--修改 HTML 元素
m0_74293254的博客
07-13 1984
7、元素节点.insertBefore(element)：在指定的子节点前面插入新的子节点。这个方法用于在指定子元素之前插入一个新的子元素。5、元素节点.appendChild(element)：添加 HTML 元素。这个方法用于将一个元素节点作为子元素添加到另一个元素节点中。6、元素节点.replaceChild(element)：替换 HTML 元素。这个方法用于将一个元素节点替换掉另一个元素节点。例如 document.createElement('div') 将创建一个 元素节点。
探索创新密码输入视图：DemoInPutPasswordView
gitblog_00004的博客
04-24 301
探索创新密码输入视图：DemoInPutPasswordView 项目地址:https://gitcode.com/ApesTalk/DemoInPutPasswordView 在数字化的世界里，安全和用户体验是移动应用开发的核心要素。对于需要用户输入密码的场景，如何兼顾这两点呢？今天，我们将介绍一个开源项目——DemoInPutPasswordView，它提供了一个独特且易于定制的密码输入视图解...
JavaScript之DOM更改元素
weixin_44827643的博客
06-21 2397
本文主要介绍在利用DOM获取页面的元素之后，如何更改元素的内容、属性以及样式。
JS中修改元素内容，属性，样式的方法【详解】
杜永康的博客
10-29 4555
如果把属性作为集合，那么样式就是这个集合的元素。样式（style）也是一种属性，样式后面的内容是样式（style）的属性值 属性值里面的内容为 样式名：样式值。所以这种修改有这个特点：修改后的内容会把之前原有的内容覆盖掉，只执行修改后的内容。这种方式，方便我们调试功能，修改元素属性。法一：获取元素名.style.样式名=‘样式值’法二：获取元素名.style=‘样式名：样式值’，color是样式名，red是样式值。获取元素名.属性名=‘属性值’
jQuery实用技巧大全：26个高效操作示例
"这篇文章主要汇总了26个jQuery使用的小技巧，涵盖了各种实用的功能，如禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、浏览器检测、图片预加载、页面样式切换等。适合需要提升jQuery技能的开发者参考学习...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值