WebAPI(part6)--自定义属性操作
生活随笔
收集整理的這篇文章主要介紹了
WebAPI(part6)--自定义属性操作
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
學習筆記，僅供參考，有錯必究
文章目錄
- Web API
- 自定義屬性操作
- 獲取屬性值
- 設置屬性值
- 移除屬性
Web API
自定義屬性操作
獲取屬性值
獲取屬性值的兩種方式：
//第1種 element.屬性 //第1種 element.getAttribute('屬性');區別：
| element.屬性 | element.屬性只能獲取元素自帶的屬性，比如id, class |
| element.getAttribute('屬性'); | element.getAttribute('屬性');主要獲取自定義的屬性，比如我們自己定義data-index屬性，就可以通過這種方式獲取 |
- 舉個例子
代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="demo" data-index="1" class="nav">hh</div><script>var div = document.querySelector('div');// 1. 獲取元素的屬性值// (1) element.屬性console.log(div.id);//(2) element.getAttribute('屬性') get得到獲取 attribute 屬性的意思 我們程序員自己添加的屬性我們稱為自定義屬性 indexconsole.log(div.getAttribute('id'));console.log(div.getAttribute('data-index'));</script></body></html>查看DevTools：
設置屬性值
設置屬性值的兩種方式：
//第1種 element.屬性 = '值' //第2種 element.setAttribute('屬性', '值');區別：
| element.屬性 = '值' | element.屬性 = '值'只能設置元素自帶的屬性，比如id, class |
| element.setAttribute('屬性', '值'); | element.getAttribute('屬性');設置自定義的屬性，比如我們自己定義data-index屬性，就可以通過這種方式設置 |
- 舉個例子
代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="demo" data-index="1" class="nav">hh</div><script>var div = document.querySelector('div');console.log(div.id);console.log(div.className);console.log(div.getAttribute('data-index'));// (1) element.屬性= '值'div.id = 'test';div.className = 'your-body';// (2) element.setAttribute('屬性', '值'); 主要針對于自定義屬性div.setAttribute('data-index', 2);console.log(div.id);console.log(div.className);console.log(div.getAttribute('data-index'));</script></body></html>查看DevTools：
移除屬性
移除屬性：
div.removeAttribute('屬性');總結
以上是生活随笔為你收集整理的WebAPI(part6)--自定义属性操作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WebAPI(part5)--排他操作
- 下一篇： 水星 MW150RM 迷你型无线路由器上