HTML5 data-* 自定义属性

data-* 自定义属性

例：

<div id =”test” >

Click here

</div>

1. 设置方式:为div添加一个data-name的自定义属性

 

答：

1. 通过dataset进行操作

var test = document.getElemById(‘test’);

test.dataset.name = ‘myname’;

 

1. 通过setAttribute

var test = document.getElemById(‘test’);

test. setAttribute(data-name , ‘myname’);

 

1. Jquery方式

$(‘#test’).data(‘name’,’myname’);

 

 

1. 读取:为div添加一个点击事件，并输出自定义data-name的值

 

答：

1. dadaset读取

var test = document.getElemById(‘test’);

// var name = test. dataset.name;

test.onclik = function () {

         alart(this.dataset.name);

        

}

1. getAttribute

var test = document.getElemById(‘test’);

// var name=test.getAttribute("data-name");

test.onclik = function () {

         alart(this.getAttribute("data-name");

        

}

 

1. Jquery方式

var name = $(‘#test’).data(‘name’);

 

 

（3）为自定义属性data-name添加样式：背景色：#333;宽：100px;高100px;

 

答：

<style>

         [data-name] {

                  background-color: #333;

                  width: 100px;

                  height:100px;

}

</style>