使用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 ...
随机推荐
- 【俗话说】换个角度理解TCP的三次握手和四次挥手
PS:通俗一点的解释都会在引用块中 Nothing is true, Everything is permitted. 0. 什么是TCP TCP,全称Transmission Control Pro ...
- PDF 相关操作
去年一年偷了下懒, 博客写了一点就没写了, 还好一些大的flag完成了. 花了半年的空余时间, 培养了一门兴趣爱好. 自己在为人处世上还是不够圆滑啊, 也难怪. 自己当初选择走技术这条路的初 ...
- 后渗透之meterpreter使用攻略
Metasploit中的Meterpreter模块在后渗透阶段具有强大的攻击力,本文主要整理了meterpreter的常用命令.脚本及使用方式.包含信息收集.提权.注册表操作.令牌操纵.哈希利用.后门 ...
- Asp.Net Core EndPoint 终点路由工作原理解读
一.背景 在本打算写一篇关于Identityserver4 的文章时候,确发现自己对EndPoint -终结点路由还不是很了解,故暂时先放弃了IdentityServer4 的研究和编写:所以才产生了 ...
- 【WPF学习】第五十六章 基于帧的动画
除基于属性的动画系统外,WPF提供了一种创建基于帧的动画的方法,这种方法只使用代码.需要做的全部工作是响应静态的CompositionTarge.Rendering事件,触发该事件是为了给每帧获取内容 ...
- Codeforces Round #292 (Div. 2) C. Drazil and Factorial 515C
C. Drazil and Factorial time limit per test 2 seconds memory limit per test 256 megabytes input stan ...
- 峰哥说技术:09-Spring Boot整合JSP视图
Spring Boot深度课程系列 峰哥说技术—2020庚子年重磅推出.战胜病毒.我们在行动 09 峰哥说技术:Spring Boot整合JSP视图 一般来说我们很少推荐大家在Spring boot ...
- 在centos7使用docker下搭建elasticsearch集群
一 .docker的安装 https://www.cnblogs.com/ghostdot/p/12410242.html 二.创建相关映射文件 cd /home/ mkdir node cd nod ...
- 研究开源源码之Myrmec
好久没写博客了,自己也弄不清是懒了还是忙了.毕竟白天需要工作,晚上有时候看看资料,有时候陪家人,有时候约朋友......更加累了,可能由于累了就懒得总结了. 今天有同事问我关于代码检查文件类型的问题. ...
- 实验二——Linux系统简单文件操作命令
项目 内容 这个作业属于那个课程 这里是链接 作业要求在哪里 这里是链接 学号-姓名 17041506-张政 作业学习目标 学习在Linux系统终端下进行命令行操作,掌握常用命令行操作并能通过命令行操 ...