在div元素中自定義一些屬性可以很方便傳遞一些數據,那么這篇文章就說一說,利用 js 來獲取DIV元素的屬性值,以及如何動態的設置div的屬性以及屬性值。

js 獲取DIV的屬性值

国产视频app原生 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="hello word!"></div>
<script>
    document.getElementById('mochu').removeAttribute('title');
</script>

結果如圖下圖:

JS 刪除DIV元中的指定屬性

js 改變DIV元素指定屬性的值

利用 javascript 來修改DIV元素中的指定屬性的值,可以使用 setAttribute() 方法

代碼:

<div id="mochu" title="這里的值會被改變成網址"></div>
<script>
    document.getElementById('mochu').setAttribute('title','http://xswdd.cn');
</script>

審核元素,如下圖所示

js 改變DIV元素指定屬性的值

jquey 設置屬性及屬性值

国产视频app相對于原生的 javascript 來說,使用 jquery 可以更加方便的獲取,以及修改 DIV 元素的屬性值.

jquey 中的 attr() 方法可以設置div元素的值,而且可以同時設置多個。

代碼:

<div id="mochu" title="飛鳥慕魚博客"></div>
<script>
    //設置單個屬性
    $('#mochu').attr('data-id','1');
    //同時設置多個屬性
    $('#mochu').attr({"data-host":"http://xswdd.cn", "data-time": "20190808" });
</script>

結果如下圖所示:

jquey 設置屬性及屬性值

jquey 獲取DIV元素中的屬性的屬性值

jquey 中的 attr() 方法不僅可以設置div元素的屬性以及屬性值,還可獲取div元素屬性的屬性值

代碼:

<div id="div" title="http://xswdd.cn"></div>
<script>
    var title = $('#div').attr('title');
    console.log(title);
</script>

打印結果:

http://xswdd.cn