HTML 5 的data-* 自定义属性
日期:2013-11-22 来源:攀枝花惠康网络公司
HTML 5增添了一项新功能是自界说数据属性,也就是 data-*
自界说属性。在HTML5中我们可以使用以data-
为前缀来设置我们需要的自界说属性,来进行一些数据的存放。当然高级浏览器下可经由过程剧本进行界说和数据存取。在项目实践中很是有用。
例如:
XHTML
1
<div id="user" data-uid="12345" data-uname="愚人码头"></div>
使用attributes体例存取data-*
自界说属性的值很是便利:
JavaScript
1234567
// 使用getAttribute获取 data- 属性var user = document.getElementById('user');var userName = plant.getAttribute('data-uname'); // userName = '愚人码头'var userId = plant.getAttribute('data-uid'); // userId = '12345' // 使用setAttribute设置 data- 属性user.setAttribute('data-site', 'http://www.css88.com');
此体例能在所有的现代浏览器中正常工作,但它不是HTML 5 的自界说 data-*
属性被使用目的,否则和我们以前使用的自界说属性就没有什么区别了,例如:
XHTML
12345678910
<div id="user" uid="12345" uname="愚人码头"></div><script>// 使用getAttribute获取 data- 属性var user = document.getElementById('user');var userName = plant plant.getAttribute('uid'); // userId = '12345' // 使用setAttribute设置 data- 属性user.setAttribute('site', 'http://www.css88.com');</script>
这种体例经由过程访谒一个元素的dataset
属性来存取data-*
自界说属性的值。这个dataset
属性是HTML5 JavaScript API的一部门,用来返回一个所有选择元素data-
属性的DOMStringMap对象。
和attributes体例斗劲:
使用这种体例时,不是使用完整的属性名,如data-uid
来存取数据,应该去失踪data-
前缀。
还有一点出格注重的是:data-
属性名如不美观包含了连字符,例如:data-date-of-birth
,连字符将被去失踪,并转换为驼峰式的命名,前面的属性名转换后应该是:dateOfBirth
。
XHTML
12345678910111213
<div id="user" data-id="1234567890" data-name="愚人码头" data
-date
-of
-birth
>码头</div><script type="text/javascript"> var el = document.querySelector('#user'); console.log(el.id); // 'user' console.log(el.dataset);//一个DOMStringMap console.log(el.dataset.id); // '1234567890' console.log(el.dataset.name); // '愚人码头' .dataset.dateOfBirth); // '' el.dataset.dateOfBirth = '1985-01-05'; // 设置data-date-of-birth的值. console.log('someDataAttr' in el.dataset);//false el.dataset.someDataAttr = 'mydata'; console.log('someDataAttr' in el.dataset);//true</script>
data-*
主若是对自界说属性做了尺度化;轮回取值的时辰dataset
属性斗劲便利,还有不是问题的问题就是自界说的attribute也不合适html规范(接待留言填补)。
如不美观你想删失踪一个data-属性
,可以这么做:
delete el.dataset.id; 或者
el.dataset.id=null; 。
看起来很美,哈哈,可是不幸的是,新的dataset
属性只有在Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+浏览器中实现,所以在此时代最好用的getAttribute和setAttribute来操作。
关于data-属性选择器
同样的我们也可以经由过程data-
属性值对响应的元素设置CSS样式,例如下面这个例子:
XHTML
12345678910111213141516
<style type="text/css"> .user { width: 256px; height: 200px; } .user[data-name='feiwen'] { color: brown } .user[data-name='css'] { color: red }</style><div class="user" data-id="123" data-name="feiwen">1</div><div class="user" data-id="124" data-name="css">码头</div>
在现实开发时,您可能会发现它很有用,你可以按照自界说的data-
属性选择相关的元素。例如使用querySelectorAll选择元素:
JavaScript
12345
// 选择所有包含 'data-flowering' 属性的元素document.querySelectorAll('[data-flowering]'); // 选择所有包含 'data-text-colour' 属性值为red的元素document.querySelectorAll('[data-text-colour="red"]');
更多参阅:
http://ejohn.org/blog/html-5-data-attributes/
使用attribute体例存取data-*
自界说属性的值
demo:
这种“原始”的自界说属性和膳缦沔data-*
自界说属性没什么区别,常识属性名纷歧样。
dataset属性存取data-*自界说属性的值
http://html5demos.com/dataset
文章来源:攀枝花惠康网络公司
惠康网络,是一家专业从事攀枝花网站建设,攀枝花网站制作,攀枝花网站设计公司,提供网站建设一条龙服务(网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广),惠康网络立足攀枝花,辐射全中国,攀枝花惠康网络的客户已经遍布国内各地大中小城市,我们高效优质的网站建设服务深受用户好评。