當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS获取元素属性和自定义属性

發布時間：2023/12/31 javascript 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS获取元素属性和自定义属性小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

昨天有同事問我，怎么獲取自定義元素的屬性，我意識到這個確實是個問題，所有總結一下自己的心得。

獲取元素的屬性分為兩種類型：

1-獲取元素常見的屬性（class,id,type,value…）

2-獲取自定義的元素的屬性（data-value,data-mess…）

獲取元素的屬性，設置元素的屬性：

1-原生JS

設置屬性 .setAttribute("屬性","值")獲取屬性 .getAttribute("屬性")

2-jquery

設置屬性 .attr("屬性","值")獲取屬性 .attr("屬性")

下面通過一個例子介紹一下，如何獲取和設置元素的屬性；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>獲取元素屬性</title><style>* {margin:0;padding:0;list-style:none;}</style></head><body><div id="mayouchen"><div style="background:red;height:20px">元素屬性獲取</div><div class="test1"><p id="demo">點擊按鈕來設置按鈕的 type,id,class 屬性。</p><input value="OK" class="mayouchen"><button onclick="mayouchen1()">獲取元素屬性</button></div><div style="background:green;height:20px">自定義屬性獲取</div><div class="test2"><div id="tree" data-leaves="47" data-plant-height="2.4m">我是被獲取的元素</div><button onclick="mayouchen2()">獲取自定義元素屬性</button></div></div><script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script><script>$(function() {});function mayouchen1() {document.getElementsByTagName("INPUT")[0].setAttribute("type", "button");document.getElementsByTagName("INPUT")[0].setAttribute("class", "mayouchen");document.getElementsByTagName("INPUT")[0].setAttribute("id", "test1");document.getElementsByTagName("INPUT")[0].getAttribute("id");document.getElementsByTagName("INPUT")[0].getAttribute("class");console.log("id=====" + document.getElementsByTagName("INPUT")[0].getAttribute("id"));console.log("class=====" + document.getElementsByTagName("INPUT")[0].getAttribute("class"));}function mayouchen2() {var tree = document.getElementById("tree");//getAttribute()取值屬性console.log("data-leaves======" + tree.getAttribute("data-leaves"));console.log("data-plant-height===============" + tree.getAttribute("data-plant-height"));//setAttribute()賦值屬性tree.setAttribute("data-come", "49");//data-前綴屬性可以在JS中通過dataset取值，更加方便console.log("通過dataset獲得data-leaves====" + tree.dataset.leaves);console.log("通過dataset獲得data-plant-height====" + tree.dataset.plantHeight);//注意在這里連字符的訪問時，屬性要寫成駝峰形式}</script></body></html>

上面有兩個test, test1是測試元素常見屬性，test2是測試元素自定義屬性

總結

以上是生活随笔為你收集整理的JS获取元素属性和自定义属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。