有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

js 获取和设置元素属性的值(实现方式)注意要点

javascript 炮渣日记 1个月前 (11-07) 56次浏览 已收录 0个评论 扫描二维码

在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','https://www.paozha.net');
</script>

jquey 设置属性及属性值

相对于原生的 javascript 来说,使用 jquery 可以更加方便的获取,以及修改 DIV 元素的属性值.

jquey 中的 attr() 方法可以设置div元素的值,而且可以同时设置多个。

代码:

<div id="mochu" title="飞鸟慕鱼博客"></div>
<script>
 //设置单个属性
 $('#mochu').attr('data-id','1');
 //同时设置多个属性
 $('#mochu').attr({"data-host":"https://www.paozha.net", "data-time": "20190808" });
</script>

jquey 获取DIV元素中的属性的属性值

jquey 中的 attr() 方法不仅可以设置div元素的属性以及属性值,还可获取div元素属性的属性值

代码:

<div id="div" title="https://www.paozha.net"></div>
<script>
 var title = $('#div').attr('title');
 console.log(title);
</script>
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址