使用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. PyQt5之音乐播放器

    按照自己思路简单写了个桌面播放器,只有自己喜欢的歌.使用QtDesigner设计的ui界面,功能简单,还有很多bug@~@,代码奉上: music_button.ui使用扩展工具pyuic5生成了mu ...

  2. 基于Noisy Channel Model和Viterbi算法的词性标注问题

    给定一个英文语料库,里面有很多句子,已经做好了分词,/前面的是词,后面的表示该词的词性并且每句话由句号分隔,如下图所示 对于一个句子S,句子中每个词语\(w_i\)标注了对应的词性\(z_i\).现在 ...

  3. Java树结构

    今天在项目中,运用到了Java树结构,是在一个查询中,选择树结构例如图片 该结构采用了前段的最新的知识,通过xml结构的数据库,后端Spring的映射实现的. 代码示例: 数据库: <!-- 取 ...

  4. ASP.NET CORE 管道模型及中间件使用解读

    说到ASP.NET CORE 管道模型不得不先来看看之前的ASP.NET 的管道模型,两者差异很大,.NET CORE 3.1 后完全重新设计了框架的底层,.net core 3.1 的管道模型更加灵 ...

  5. node--非阻塞式I/O，单线程，异步，事件驱动

    1.单线程 不同于其他的后盾语言,node是单线程的,大大节约服务器开支 node不为每个客户创建一个新的线程,仅使用一个线程.通过非阻塞I/O以及 事件驱动机制,使其宏观上看是并发的,可以处理高并发 ...

  6. 前端每日实战：17# 视频演示如何用纯 CSS 创作炫酷的同心矩形旋转动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教程 此视频 ...

  7. webpack安装问题

    在sf进行安装webpack时候,报错如下: 解决方案:npm install webpack-cli -g,如图上

  8. django 知识点小结

    以下内容为用django写blog中的一些知识点,权当复习. 一.定义view 1.get_object_or_404()是用get()查询数据,如果不存在就直接返回404 参数: get_objec ...

  9. Asp.Net Core 2.0实现HttpResponse中繁切换

    随笔背景:因为项目中有个简单的功能是需要实现中文简体到繁体的切换,数据库中存储的源数据都是中文简体的,为了省事就想着通过HttpHeader的方式来控制Api返回对应的繁体数据. 实现方式:通过Asp ...

  10. [python]回答百度知道上的问题2000-2999之间的回文日

    因为百度知道的编辑器没有提供代码功能,将回复写入. 题目如下: 求2000到2999的所有回文日,例如20200202 用Python怎么做 回文年好求,回文日的话,年月日这咋存啊 思路一:遍历每一天 ...