使用datasest属性改变样式
使用datasest属性改变样式
传统做法
对于html中的标签我们可以自定义标签中的属性，例如给input加一个aaa属性
<input type="text" aaa="bbb">
接下来获取input的属性并在控制台中输出，即：
let intype = document.querySelector("input");
console.log("intype.type:"+intype.type);
console.log("intype.aaa:"+intype.aaa);
在控制台中可以看到
也就是说无法通过 元素.属性名的方式 直接获取属性aaa的值
这时候只能通过 元素.getAttribute('属性名') 来获取其属性值，代码入下：
console.log("intype.getAttribute('aaa'):"+intype.getAttribute("aaa"));
结果如下
而要改变该元素属性的方法则是 元素.setAttribute('属性名','属性值') 代码如下
intype.setAttribute("aaa","ddd");
此时在检查元素可以看到
dataset
而通过data-属性名 这种方法可以 自定义属性名并通过 data.属性名获取属性值
举例：
通过按钮改变背景颜色
<body>
<button data-acolor="red">红</button>
<button data-acolor="yellowgreen">绿</button>
<button data-acolor="skyblue">蓝</button>
</body>
<script>
let btns = document.getElementsByTagName("button");
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
document.body.style.backgroundColor = this.dataset.acolor;
}
}
</script>
如上通过给每个button指定一个data-acolor 属性,则可以在button的点击事件中使用this进行指定，
从而实现点击不同的按钮更换不同的背景色
补充：
点击按钮切换背景色除了上述方式也可通过数组进行赋值，具体代码如下(布局可不用改变)：
let btns = document.getElementsByTagName("button");
let color_list = ["red","yellowgreen","skyblue"]
for(let i = 0;i < btns.length;i++){
//为btn添加一个属性index
btns[i].index = i;
btns[i].onclick = function(){
document.body.style.backgroundColor = color_list[this.index];
}
}
使用datasest属性改变样式的更多相关文章
- jQuery入门（2）使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- JQuery操作元素的属性与样式及位置 复制代码
<script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> ...
- jQuery-1.样式篇---属性与样式
jQuery的属性与样式之.attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.如:在img元素中,src就是元素的特性,用来标 ...
- Vuejs——（3）计算属性，样式和类绑定
版权声明:出处http://blog.csdn.net/qq20004604 目录(?)[+] 先上总结: (十九)标签和API总结(2) vm指new Vue获取的实例 ①当dom标签里的值 ...
- JQuery操作元素的属性与样式及位置
<script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> ...
- 自己定义RatingBar,能依据设置改变样式
项目在我的GITHUB上 mirsfang的GitHub 一个简单的自己定义View ,为了一个 比較奇葩的需求而搞出来的.他的功能就是能让你自己设置图片和图片的大小以及星星的数量,是一个组合型的 ...
- CSS3 - 鼠标移入移出时改变样式
1,使用伪类实现样式切换伪类是CSS2.1时出现的新特性,让许多原本需要JavaScript才能做出来的效果使用CSS就能实现.比如实现下面的鼠标悬停效果,只要为:hover伪类应用一组新样式即可.当 ...
- jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
随机推荐
- JVM性能优化
java应用程序是应用在JVM上的,你们对JVM又有多少了解呢?JVM将内存分为三部分:NEW(年轻代).Tenured(年老代).Perm(永久代). (1)年轻代:用来存放java分配的新对象. ...
- 阿里sentinel说明及使用
使用说明 如果只是为了让使 用Sentinel 的限流功能,只需要引入相关的jar包依赖. 添加依赖 添加相关模块的Adapter Sentinel为每个构建项目的各个组件都打包成了相应的Adapte ...
- CentOS7.5源码编译安装mysql5.7.29
#查看系统版本 [root@ctos3 ~]# cat /etc/redhat-release CentOS Linux release (Core) #下载源码包,需要注意的是mysql5.7 编译 ...
- All In One
set1 https://github.com/tianhang-f... set2 https://github.com/tianhang/F... set3https://github.com/t ...
- echart 新手踩坑
仪表盘踩坑 我采用的是单文件引入的方式来加载echarts图标也可以使用配置等方式详情参考文档,如果同学们要做出更加丰富的样式请参考文档配置手册配置手册:http://echarts.baidu.co ...
- 基础JavaScript练习（三）总结
任务目的 实践JavaScript数组.字符串相关操作 任务描述 基于任务四进行升级 将新元素输入框从input改为textarea 允许一次批量输入多个内容,格式可以为数字.中文.英文等,可以通过用 ...
- Spring Cloud Feign 优雅的服务调用
Fegin 是由NetFlix开发的声明式.模板化HTTP客户端,可用于SpringCloud 的服务调用.提供了一套更优雅.便捷的HTTP调用API,并且SpringCloud整合了Fegin.Eu ...
- 容器内init进程方案
背景 进程标识符 (PID) 是Linux 内核为每个进程提供的唯一标识符.熟悉docker的同学都知道, 所有的进程 PID都属于某一个PID namespaces, 也就是说容器具有一组自己的 P ...
- CVPR 2020 全部论文 分类汇总和打包下载
CVPR 2020 共收录 1470篇文章,根据当前的公布情况,人工智能学社整理了以下约100篇,分享给读者. 代码开源情况:详见每篇注释,当前共15篇开源.(持续更新中,可关注了解). 算法主要领域 ...
- Python中使用os模块执行远程命令
1. 使用os模块远程执行命令 服务端代码 1 import socket 2 import os 3 4 sh_server = socket.socket() #创建一个socket对象 5 sh ...