1. 首頁 > 生活 > >

js如何獲取屬性的值 jquery獲取自定義屬性的值

小知識



文章插圖
js如何獲取屬性的值 jquery獲取自定義屬性的值

文章插圖

在div元素中自定義一些屬性可以很方便傳遞一些數據，那么這篇文章就說一說，利用 js 來獲取DIV元素的屬性值，以及如是要設置div的屬性以及屬性值 。
js 獲取DIV的屬性值
原生 javascript 可以通過 HTML DOM 的 getAttribute() 方法獲取DIV元素屬性的值，
代碼：
<div id="mochu" title="飛鳥慕魚博客"></div><script>var title = document.getElementById('mochu').getAttribute('title');console.log(title);</script>打印結果：
飛鳥慕魚博客JS 刪除DIV元中的指定屬性
JS 中可以使用 removeAttribute() 方法來刪除DIV元素中的屬性
代碼：
<div id="mochu" title="飛鳥慕魚博客"></div><script> document.getElementById('mochu').removeAttribute('title');</script>結果如圖下圖：
js 改變DIV元素指定屬性的值
利用 javascript 來修改DIV元素中的指定屬性的值，可以使用 setAttribute() 方法
代碼：
<div id="mochu" title="飛鳥慕魚博客"></div><script> document.getElementById('mochu').setAttribute('title','http://www.feiniaomy.com');</script>審核元素，如下圖所示
【js如何獲取屬性的值 jquery獲取自定義屬性的值】jquey 設置屬性及屬性值
相對于原生的 javascript 來說，使用 jquery 可以更加方便的獲取，以及修改 DIV 元素的屬性值.
jquey 中的 attr() 方法可以設置div元素的值，而且可以同時設置多個 。
代碼：
<div id="mochu" title="飛鳥慕魚博客"></div><script> //設置單個屬性 $('#mochu').attr('data-id','1'); //同時設置多個屬性 $('#mochu').attr({"data-host":"http://www.feiniaomy.com", "data-time": "20190808" });</script>結果如下圖所示：
jquey 獲取DIV元素中的屬性的屬性值
jquey 中的 attr() 方法不僅可以設置div元素的屬性以及屬性值，還可獲取div元素屬性的屬性值
代碼：
<div id="div" title="http://www.feiniaomy.com"></div><script> var title = $('#div').attr('title'); console.log(title);</script>打印結果：
http://www.feiniaomy.com