使用datasest属性改变样式

2019-11-12 18:51:27 阅读：250 来源： 互联网

标签：document aaa 样式 intype datasest let 属性 btns

使用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];
        }
    }

标签：document,aaa,样式,intype,datasest,let,属性,btns
来源： https://www.cnblogs.com/axu1997/p/11844331.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用datasest属性改变样式

使用datasest属性改变样式

传统做法

dataset

举例：

补充：