【JS】设置、获取、删除标签属性以及H5自定义属性
目录
1、设置标签属性
2、获取标签属性
3、删除标签属性
4. 判断是否包含指定的属性
5、HTML5自定义属性
1、设置标签属性
使用setAttribute()('属性名', '属性值')
方法可以添加、修改、删除属性。
下面的demo是为input添加、修改、删除value属性:
- HTML
<input type="text" class="input">
<input type="text" class="input">
<input type="text" class="input">
- JS
// 添加value属性
document.querySelectorAll('.input')[0].setAttribute('value', "add value's attribute"); // 修改value属性
document.querySelectorAll('.input')[1].setAttribute('value', "change value's attribute"); // 删除value属性值
document.querySelectorAll('.input')[3].setAttribute('value', "");
注意:querySelectorAll 可以选择多个节点,以","分隔开,返回的是个数组;
2、获取标签属性
使用 getAttribute(‘属性名')
方法获取标签的属性
下面的demo是获取input的name属性
- HTML
<input type="text" name="zhangdan" class="input">
- JS
const name = document.querySelectorAll('.input')[0].getAttribute('name');
console.log(name); // zhangdan
3、删除标签属性
使用removeAttribute('属性名')方法删除标签的属性
下面的demo是删除input的name属性
- HTML
<input type="text" name="inputBox" class="input">
- JS
const name = document.querySelectorAll('.input')[0].removeAttribute('name');
console.log(name); // undefined
4. 判断是否包含指定的属性
element.hasAttribute(“属性名”) 判断元素里面有没有对应的属性名
结果会返回布尔类型的值,true或false
const target = document.getElementsByClassName('test')[0];
target.setAttribute('data-name', 'test');
console.log(target.hasAttribute('data-name')); // true
target.removeAttribute('data-name');
console.log(target.hasAttribute('data-name')); // false
5、HTML5自定义属性
- 自定义属性的目的:是为了保存和使用数据,有些数据可以保存到页面中而不用保存到数据库中
- 自定义属性获取是通过 getAttribute(‘属性’) 方法获取
- 但是有些自定义属性很容易引起歧义,不容易判断到底是元素内部的属性还是自定义属性
- H5中新增了标准
1.H5中规定自定义属性需要以 data- 开头做属性名并且赋值
<div data-name="test" ></div>
或者
element.setAttribute('data-name','test');
2. 获取H5自定义属性
兼容性较好的获取方法 getAttribute(‘属性’)
H5新增方法(从IE11才开始支持,兼容性较差)
element.dataset.属性;
element.dataset[ ‘属性’ ];
dataset 可以理解成 集合 的意思,获得所有以 data-开头的 自定义属性,data-开头的自定义属性的集合
const target = document.getElementsByClassName('test')[0];
console.log(target.dataset);
console.log(target.dataset.name);
console.log(target.dataset.age);
注意:使用
dataset
操作data
要比使用getAttribute
速度稍微慢些,虽然使用dataset
不能提高代码的性能,但是对于简洁代码,提高代码的可读性和可维护性是很有帮助的。
【JS】设置、获取、删除标签属性以及H5自定义属性相关推荐
- js设置获取删除cookie
/* cookie 会有一个过期时间,如果不设置过期时间那么关闭页面就会消失,如果想要删除这个cookie的话就要设置一个过期时间,存储大小只有4kb左右设置无过期时间: document.cooki ...
- js获取html样式属性,js怎么获取指定css属性的值?
js怎么获取指定css属性的值?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. js怎么获取指定css属性的值? 1.通过dom.style.属性 来获取 ...
- 前端cookie的设置获取删除
前端cookie的设置获取删除 /* 我们有过这样的经历,当我们登录一个网站时候,网站会提示我们需不需要记住账号和密码一般来说,当我们登录一个网站时,后台会返回一个token字符串作为用户的登录标识, ...
- 使用onclick()事件以及this获取当前标签属性值的问题
使用onclick()事件以及"this"获取当前标签属性值的问题 代码: 效果图: 进行操作时点击对应的button需要获取其对应的id值,类.ID选择器并不适用与获取动态的数据 ...
- 6 JS 和 Jquery 删除标签元素
6 JS 和 Jquery 删除标签元素 Jquery:$().remove() jQuery remove() 方法删除被选元素及其子元素, 即删除元素自身. <body> <di ...
- 在JS中获取父标签的id
在HTML中拼接了一个单选框,它分为一个按钮和一个文本框,但是我需要获取他们的父标签,也就是包含着他们的div标签. 使用parentElement属性可以返回指定元素的上级元素节点. ...
- Xpath -- 删除标签属性
代码 # -*- coding: utf-8 -*- # @Author : markadcdef del_attr(org_html: str) -> str:tree = etree.HTM ...
- js 如何获取td标签的值
$("td")是获取的所有td标签 通过循环遍历 也可以通过下标获取 $("td").eq(0).text();这是获取下标为0的值也就是第一个td $(&qu ...
- js,jq,jquery删除css属性
属性值是不能删除的,只能改变属性值达到我们想要的效果 1.去掉div的高度 <div style='height:50px' id='height'></div> <sc ...
最新文章
- 谷歌正式推出 Fuchsia OS比拼HarmonyOS!
- python邮件发送csv附件_Python2.7 smtplib发送带附件邮件报错STARTTLS解决方法
- android纵向列表菜单栏实现,RecyclerView实现常见的列表菜单
- 自动修改linux下/etc/sysconfig/network-scripts/ifcfg-ethX网卡文件的脚本
- 机器学习算法总结之支持向量机(二)
- iOS开发之旧版本Xcode下载
- chaos-monkey-spring-boot小试牛刀
- 排序链表(归并排序)
- 苹果手机制作铃声 (简易版)
- 《凡人修仙传》8.25正式上线链游玩家 | 修仙世界、天降神器
- Unity + LeapMotion 识别食指伸出以及食指与 UGUI的 交互
- 哈希表,设计哈希集合,
- 【年终总结】回顾我平凡且不平凡的 2021
- 【Axure】Axure RP制作日期控件
- HDU 4417 Super Mario(划分树)
- vim快捷键(一)查找与替换
- JSON java 正则_9、正则表达式与JSON
- 巨坑 jom makefile debug error 2 报错
- 【Uniapp商城项目】开发过程中遇到的bug问题汇总
- QMediaPlayer视频播放器