合买大神
网站首页 网站建设 公司动态 行业新闻 案例展示 关于我们

文章内容

HTML 5 的data-* 自定义属性

日期:2013-11-22  来源:攀枝花惠康网络公司

HTML 5增添了一项新功能是自界说数据属性,也就是 data-*自界说属性。在HTML5?#24418;?#20204;可以使用以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属性只?#24615;贑hrome 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

文章来源:攀枝花惠康网络公司

惠康网络,是一家专业从事攀枝花网站建设,攀枝花网站制作,攀枝花网站设计公司,提供网站建设一条龙服务(网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广),惠康网络立足攀枝花,辐射全中国,攀枝花惠康网络的客户已经遍布国内各地大?#34892;?#22478;市,我们高效优质的网站建设服务深受用户好评。

?#22836;认擼?img src="skin/images/tel.png" alt="tel" height="15" width="84" style="vertical-align:middle;">(谢先生)  ?#22836;Q:1323605005  
服务邮箱:[email protected](售前咨询)  [email protected](技术部)  [email protected](售后服务)
公司地址:四川省攀枝花市
?#26102;啵?/span>617200

合买大神 皇家马德里吧_百度贴吧 法兰克福旅游攻略 北京赛车pk10开奖漏洞 2012巴萨vs莱万特录像 锁子甲的外套 福建福利31选7走势图 皇家社会队长 加勒比海盗西班牙人 弗罗西诺内vs米兰 美国mg电子游戏