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设置html标签属性JS获取和设置元素的属性以及属性值 Vue.js
(图片来自网络侵删)

飞鸟慕鱼博客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>

审核元素,如下图所示

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