返回首頁 | 關于我們 | 作品展示 | 網站建設 | 網站優化 | 網站策劃 | 解決方案 | 聯系我們 | 在線留言 | 需求提交
   


您當前的位置是:首頁 > 網站建設 > HTML 5 的data-* 自定義屬性
網站建設知識
域名空間
網站建設
網頁設計
網站推廣
最新文章
偽靜態網站對網站優化的好處
域名備案正確拍照示例
網站備案的流程、網站備案需要哪些資料?
網站到底要不要開啟https?
打造高質量的網站
好好建站網告訴您---北京做網站多少錢?
如何辦理經營性備案?
北京公司如何選擇公司網站域名?
Kindeditor 單獨調用單張圖上傳增加預覽
解析北京做網站注意事項
關于阿里云域名實名認證公告
北京做網站哪家強?這里有你想要的網站優化秘籍
企業為什么要做網站?
響應式網站設計圖片處理7個技巧
為什么網站做得不好的原因?
網站被百度降權之后應該怎么辦
分析競爭對手網站來做網站優化
關鍵詞突然降到100名以外的原因分析
做網站時關鍵詞優化的技巧
seo入門的基本技巧
 

HTML 5 的data-* 自定義屬性

發布時間: 2014-6-18 7:33:48

<div id="user" data-uid="12345" data-uname="愚人碼頭"></div>

使用attribute方法存取data-*自定義屬性的值

使用attributes方法存取data-*自定義屬性的值非常方便:

// 使用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-* 屬性被使用目的,不然和我們以前使用的自定義屬性就沒有什么區別了,例如:

<div id="user" uid="12345" uname="愚人碼頭"></div>

<script>

// 使用getAttribute獲取 data- 屬性

var user = document.getElementById('user');

var userName = plant.getAttribute('uname'); // userName = '愚人碼頭'

var userId = plant.getAttribute('uid'); // userId = '12345'

// 使用setAttribute設置 data- 屬性

user.setAttribute('site', 'http://www.css88.com');

</script>

這種“原始”的自定義屬性和上面data-*自定義屬性沒什么區別,知識屬性名不一樣。

dataset屬性存取data-*自定義屬性的值

這種方式通過訪問一個元素的dataset屬性來存取data-*自定義屬性的值。這個dataset屬性是HTML5 JavaScript API的一部分,用來返回一個所有選擇元素data-屬性的DOMStringMap對象。

和attributes方法比較:

data-*主要是對自定義屬性做了標準化;循環取值的時候dataset屬性比較方便,還有不是問題的問題就是自定義的attribute也不符合html規范(歡迎留言補充)。

使用這種方法時,不是使用完整的屬性名,如data-uid來存取數據,應該去掉data-前綴。

還有一點特別注意的是:data-屬性名如果包含了連字符,例如:data-date-of-birth,連字符將被去掉,并轉換為駝峰式的命名,前面的屬性名轉換后應該是:dateOfBirth。

<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); // '愚人碼頭'

console.log(el.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-屬性,可以這么做: 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-屬性選擇相關的元素。例如使用querySelectorAll選擇元素:

// 選擇所有包含 'data-flowering' 屬性的元素

document.querySelectorAll('[data-flowering]');

// 選擇所有包含 'data-text-colour' 屬性值為red的元素

document.querySelectorAll('[data-text-colour="red"]');

同樣的我們也可以通過data-屬性值對相應的元素設置CSS樣式,例如下面這個例子:

<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>


文章出自:北京做網站公司-好好建站網 http://www.lyral.tw 如轉載請注明出處!
上一篇:北京做網站淺談怎樣讓你的網站內容留住游客
下一篇:北京做網站總結提高網站用戶體驗的7大方法
捕鱼大富翁手机版 18220488459288538557627954609501758467158442478231579734882108622394414138221046685326825044038350 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();