获取html标签属性，html标签属性传值

二狗子文笔好，端起一杯茶，一边品茶一边写起了这篇文章：

吼哇！小伙伴们各位听着哦，咱们今天要来聊聊HTML标签属性的传值问题啦！你们可别小看这个小小的问题哦，它可是关系到我们前端开发的每一个角落啊！

首先，咱们来说说，什么是HTML标签属性？就是在一个HTML标签中，像这样子被放在标签名称后面的属性：

```

```

这里的attribute就是标签属性啦。比如咱们最常用的img标签，就有src属性，表示这是要加载的图片路径：

```

```

那么问题来了，这些属性的值是从哪里来的呢？是写死在代码里还是动态传值呢？

当然啦，各位聪明的小伙伴都知道，如果把属性值写死在代码里，那不就叫做“死记硬背”嘛。没错！咱们当然是要动态传值啊！

那么如何动态传值呢？肯定是要从后端拿数据啦。不过具体该怎么拿，就得看后端小伙伴的啦。而我们前端小伙伴，只需要知道如何把拿到的值传到HTML标签属性里就行了。

首先，我们得先写出HTML标签，再在标签里加上属性，然后取到这个标签，最后像下面这样传值就OK啦：

```

//html

//javascript

var myValue = "这是我要传入的值";

document.getElementById("myDiv").setAttribute("myAttribute", myValue);

```

这里我们通过setAttribute这个方法，把自定义属性myAttribute的值设为myValue，这样就巧妙地把我们的值传到了HTML标签属性里啦。

不过啊，虽然这么写很简单，但有个缺点就是代码阅读不太友好，也不太好维护。如果你对维护高要求，那么可以这样写：

```

//html

//javascript

var myValue = "这是我要传入的值";

document.getElementById("myDiv").dataset.myAttribute = myValue;

```

这样写的好处就是我们可以在HTML代码里先把属性写好，这样就能很清晰地看出这个属性有什么作用，也方便我们之后的维护。而另一边，JavaScript代码写得也比较简洁，代码阅读起来也会更加流畅。

好啦，关于HTML标签属性的传值问题就讲到这里啦。小伙伴们，如果有机会去参加一些前端交流活动，建议去听听TreeNewBie或大漠老师的分享，我的技术也是在他们的启发下得到提高的。不过，能不能像老二哥这样，端起一杯茶打字很舒服地写出好技术文章，这就要看自己的功力啦。

好啦，咋们今天的话题就讲到这里，如果你喜欢这篇文章，打个赞或者关注小编，小编鞠躬感谢啦！ 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.ynyuzhu.com/