JavaScript(15)——操作表单元素属性和自定义属性

 操作表单元素属性

  • 表单很多情况,也需要修改属性,比如点击眼睛可以看到密码,本质是把表单类型转换为文本框
  • 正常的有属性有取值的,跟其他的标签属性没有任何区别

获取:DOM对象.属性名

设置:DOM对象.属性名 = 新值

例如:获取输入文本框的信息

<body><input type="text" value="hhh1"><script>//获取元素const uname = document.querySelector('input')//获取值console.log(uname.value)//设置表单的值uname.value = 'new'//设置表单的属性uname.type = 'password'</script>
</body>

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示,如果为true代表添加了该属性,如果为false代表移除了该属性

比如:disabled、checked、selected

<input type="checkbox" name="" id=""><script>const op = document.querySelector('input')console.log(op.checked)</script>

op.checked = true 

 

自定义属性 

标准属性:标签自带的属性例如class,id,title,可以直接使用点语法操作比如:disabled,checked,selected。

自定义属性:

  • html5中推出了专门的data-自定义属性
  • 在标签上一律以data-开头
  • 在DOM对象一律以dataset对象方式获取

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3266781.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

国产超低功耗、±0.5℃精度的数字温度传感芯片 - M601B

温度传感芯片感温原理基于CMOS半导体PN节温度与带隙电压的特性关系&#xff0c;经过小信号放大、模数转换、数字校准补偿后&#xff0c;数字总线输出&#xff0c;具有精度高、一致性好、测温快、功耗低、可编程配置灵活、寿命长等优点。 数字温度传感芯片 - M601B&#xff0c;该…

如何解决 Nginx 与自动驾驶系统的集成问题?

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01; 文章目录 如何解决 Nginx 与自动驾驶系统的集成问题&#xff1f; 如何解决 Nginx 与自动驾驶系统的集成问题&#xff1f; 在当今科技飞速发展的时代&#xff0c;自动驾驶…

【基础算法总结】队列 + 宽搜(BFS)

队列 宽搜BFS 1.N 叉树的层序遍历2.二叉树的锯齿形层序遍历3.二叉树最大宽度4.在每个树行中找最大值 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1f603;&#…

配置web服务器练习

4练习要求&#xff1a; 练习一&#xff1a;配置web服务器&#xff0c;当访问网站 www.haha.com 时显示&#xff1a;haha 练习二&#xff1a;配置web服务器&#xff0c;当访问网站 www.xixi.com/secret/ 时显示&#xff1a;this is secret 具体步骤&#xff1a; 1、配置yum…

go程序在windows服务中优雅开启和关闭

本篇主要是讲述一个go程序&#xff0c;如何在windows服务中优雅开启和关闭&#xff0c;废话不多说&#xff0c;开搞&#xff01;&#xff01;&#xff01;   使用方式&#xff1a;go程序 net服务启动 Ⅰ 开篇不利 Windows go进程编译后&#xff0c;为一个.exe文件,直接执行即…

docker挂载部署reids6.2.1

1.拉取镜像 docker pull redis:6.2.12.创建挂在目录&#xff08;根据自己要求修改具体目录&#xff09; mkdir -p /home/admin/redis/{data,conf}3.在/home/admin/redis/conf目录下创建redis.conf文件 cd /home/admin/redis/conf touch redis.conf4.复制下面文本到redis.conf…

实时同步:使用 Canal 和 Kafka 解决 MySQL 与缓存的数据一致性问题

目录 1. 准备工作 2. 将需要缓存的数据存储 Redis 3. 监听 canal 存储在 Kafka Topic 中数据 1. 准备工作 1. 开启并配置MySQL的 BinLog&#xff08;MySQL 8.0 默认开启&#xff09; 修改配置&#xff1a;C:\ProgramData\MySQL\MySQL Server 8.0\my.ini log-bin"HELO…

数据库练习——编写触发器及存储过程

1. 触发器 建立两个表:goods(商品表)、orders(订单表) 在商品表中导入商品记录 mysql> create database mydb16_trigger; Query OK, 1 row affected (0.00 sec)mysql> use mydb16_trigger; Database changed mysql> create table goods(-> gid char(8) primary …

系统架构师(每日一练7)

每日一练 1.关于网络延迟正确的是()。答案与解析 A.在对等网络中&#xff0c;网络的延迟大小与网络中的终端数量无关 B.使用路由器进行数据转发所带来的延迟小于交换机, C.使用internet服务器可最大程度地减小网络延迟 D.服务器延迟的主要影响因素是队列延迟和磁盘10延迟 2.以…

idea中项目目录,文件显示不全问题

问题&#xff1a;idea中项目目录显示不全问题 解决办法1&#xff1a; 删除目录中的.idea文件 用idea重新打开文件就行了 办法2&#xff1a;手动导入为maven项目 1. 2. 3. 4.选择要导入的项目&#xff0c;导入为maven

【网络流】——初识(最大流)

网络流-最大流 基础信息引入一些概念基本性质 最大流定义 Ford–Fulkerson 增广Edmons−Karp算法Dinic 算法参考文献 基础信息 引入 假定现在有一个无限放水的自来水厂和一个无限收水的小区&#xff0c;他们之间有多条水管和一些节点构成。 每一条水管有三个属性&#xff1a…

重拾CSS,前端样式精读-函数(颜色,计算,图像和图形)

前言 本文收录于CSS系列文章中&#xff0c;欢迎阅读指正 在计算机编程中&#xff0c;函数有着重要的作用和意义&#xff0c;它可以实现封装&#xff0c;复用&#xff0c;模块化&#xff0c;参数等功能效果&#xff0c;在如何在CSS中写变量&#xff1f;一文带你了解前端样式利…

AI学习记录 - 图像识别的基础入门

代码实现&#xff0c;图像识别入门其实非常简单&#xff0c;这里使用的是js&#xff0c;其实就是把二维数组进行公式化处理&#xff0c;处理方式如上图&#xff0c;不同的公式代表的不同的意义&#xff0c;这些意义网上其实非常多&#xff0c;这里就不细讲了。 const getSpecif…

【YOLOv8系列】图像分类篇----通过YOLOv8实现图像分类功能

最近需要使用YOLOv8对自己的数据集进行训练,从而实现图像分类的功能,因此记录一下整个过程。 YOLOv8的github地址:https://github.com/ultralytics/ultralytics 参考链接:超详细YOLOv8图像分类全程概述:环境、训练、验证与预测详解 文章目录 一、YOLOv8环境搭建二、准备…

电脑QQ录屏功能怎么用?图文教程,轻松掌握电脑录屏

“想问一下大家知道电脑QQ录屏功能怎么打开吗&#xff1f;一直以来我使用电脑QQ截图非常方便&#xff0c;但不知道原来QQ还有录屏功能。希望知道QQ录屏功能使用方法的朋友教一下我好吗&#xff1f;” 今天&#xff0c;就让我带大家一起探索电脑QQ录屏功能怎么用&#xff1f;看…

怎么注册自己的电子邮件地址

无论是在职场上的工作沟通、日常的在线购物、或是订阅各类新闻资讯&#xff0c;电子邮件都是您不可或缺的数字化工具。本文将手把手引导您完成注册过程&#xff0c;从选择服务商到完成所有必要步骤&#xff0c;帮助您轻松拥有自己的电子邮件账户。 一、选择电子邮件服务商 市…

友盟U-APM——优秀的前端性能监控工具

在数字化转型浪潮的推动下,移动应用已成为企业连接用户、驱动业务增长的核心载体。然而,随着应用复杂度的日益提升,用户对于应用性能稳定性的期待也水涨船高。面对应用崩溃、卡顿、加载缓慢等频发问题,如何确保应用的流畅运行,成为产研团队亟待解决的关键挑战。在此背景下,友盟…

常见的CSS属性(一)——字体、文本、边框、内边距、外边距、背景、行高、圆角、透明度、颜色值

一、字体 二、文本 三、边框 四、外边距 五、内边距 六、背景 七、行高 八、圆角 九、透明度 九、颜色值 元素的继承性是指给父元素设置了某些属性&#xff0c;子元素或后代元素也会有作用。 一、字体 “font-*”是字体相关的属性&#xff0c;具有继承性。代码如下&a…

浅谈监听器之简单数据写入

浅谈监听器之简单数据写入 “简单数据写入”&#xff08;Simple Data Writer&#xff09;监听器便是其中之一&#xff0c;它提供了一种简便的方式来将测试结果直接输出到文件中&#xff0c;便于后续的数据分析与处理。 简单数据写入监听器概述 “简单数据写入”监听器&#…

pdf压缩在线免费 pdf压缩在线免费网页版 在线pdf压缩在线免费 免费pdf压缩工具 压缩到最小几种方法详细步骤分享

PDF是当前最为常见的电子文档格式&#xff0c;它可以保护文档不被篡改或复制格式可以保持原格式。然而&#xff0c;因为市面上积攒的PDF文件数量过多&#xff0c;也容易因为体积太大的缘故&#xff0c;致使后面对磁盘存储造成很大的压力&#xff0c;压缩PDF文件能有效缩小其体积…