使用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属性改变样式的更多相关文章

  1. jQuery入门（2）使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  2. JQuery操作元素的属性与样式及位置 复制代码

    <script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> ...

  3. jQuery-1.样式篇---属性与样式

    jQuery的属性与样式之.attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.如:在img元素中,src就是元素的特性,用来标 ...

  4. Vuejs——（3）计算属性，样式和类绑定

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   先上总结: (十九)标签和API总结(2) vm指new Vue获取的实例 ①当dom标签里的值 ...

  5. JQuery操作元素的属性与样式及位置

    <script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> ...

  6. 自己定义RatingBar,能依据设置改变样式

    项目在我的GITHUB上  mirsfang的GitHub 一个简单的自己定义View  ,为了一个 比較奇葩的需求而搞出来的.他的功能就是能让你自己设置图片和图片的大小以及星星的数量,是一个组合型的 ...

  7. CSS3 - 鼠标移入移出时改变样式

    1,使用伪类实现样式切换伪类是CSS2.1时出现的新特性,让许多原本需要JavaScript才能做出来的效果使用CSS就能实现.比如实现下面的鼠标悬停效果,只要为:hover伪类应用一组新样式即可.当 ...

  8. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  9. 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

随机推荐

  1. Chrome 插件安装时报错: "CRX_HEADER_INVALID"

    1. 将 crx 插件后缀名改为 rar 2. 解压 rar 包 3. 进入浏览器 1). 点击Chrome浏览器地址栏最右边的三个点 --> 更多工具 --> 扩展插件 --> 点 ...

  2. 基于activity的强大java工作流引擎，可视化开发工作流

    我们先来看看工作流引擎和Activity? 工作流引擎 所谓工作流引擎是指workflow作为应用系统的一部分,并为之提供对各应用系统有决定作用的根据角色.分工和条件的不同决定信息传递路由.内容等级等 ...

  3. swagger使用以及一些注解说明

    @Api:作用于Conntroller类上 value:字段说明 description:描述 tags:分组 (经常用到tags,例如如下,我只是给value,则默认应用了类名) @ApiOpera ...

  4. Newman+Jenkins实现接口自动化测试

    目录 一.是什么Newman 二.如何安装 三.如何使用 1.运行本地文件 2.运行在线文件 3.以node.js库运行 4.导出报告 四.命令行测试真实接口 1.导出collection文件 2.导 ...

  5. volatile和synchronized到底啥区别？多图文讲解告诉你

    你有一个思想,我有一个思想,我们交换后,一个人就有两个思想 If you can NOT explain it simply, you do NOT understand it well enough ...

  6. 8421BCD转余3码Verilog HDL的设计(1)

    近期阅读Verilog HDL高级数字设计(第二版)中,遇到了串行比特流BCD码转余3码转换器的设计,比较独特的是: (1)该转换器的输入为1位串行比特流,输出也为1位串行比特流. BCD码与余三码的 ...

  7. a++与++a的陷阱与盲区

    故事发生在2019.7.15的3.pm,正在复习数据结构题目,写了一句如下指令(以下函数运行在win10的dev编译器下面) #include<bits/stdc++.h> using n ...

  8. 观察者模式（Observer）和发布-订阅者模式（Publish/Subscribe）区别

    观察者模式:定义一对多的关系,让多个观察对象同时监听某一个主题对象,主题对象状态发生变化就通知所有观察者对象.所以它是由两类对像组成:Subject主题+Observer观察者.主题发布事件,观察者通 ...

  9. Apache Tomcat 文件包含漏洞（CVE-2020-1938）

    2月20日,国家信息安全漏洞共享平台(CNVD)发布了Apache Tomcat文件包含漏洞(CNVD-2020-10487/CVE-2020-1938).该漏洞是由于Tomcat AJP协议存在缺陷 ...

  10. 轻量级MVC框架(自行开发)

    源码及demo: https://github.com/killallspree/myFrame/