如何在代码中获取attr属性的值

1 attr(属性名) //获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined ）

2 attr(属性名, 属性值) //设置属性的值 （为所有匹配的元素设置一个属性值。）

3 attr(属性名,函数值) //设置属性的函数值 （为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。）

4attr(properties) //给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }。(这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意，如果你要设置对象的class属性，你必须使用'className' 作为属性名。或者你可以直接使用'class'或者'id'。)

使用JavaScript获取某个元素的属性值可以使用jQuery中的选择器+attr()方法。

工具原料：编辑器、浏览器

1、实现的思路是先使用选择器通过id获取到这个元素，然后使用attr方法获取某个属性的值，代码如下：

<div id="div1" class="test">

</div>

<script>

consolelog($('#div1')attr('class'));

</script>

2、运行的结果是获取到了class的值test，

是这样的，一开始需要获取某一个元素的 left 值，我就用 elestyleleft 去获取了（基础不扎实还好意思来丢人），然后居然返回的是空。

好吧，追本溯源，问题的根源以及区别就在这里了。

所以，我那样是获取不到某一个元素的一个其他方式设置的样式属性值的，所以我就打算谷歌一下别的方法了。

特点：

- 只可读，但是可以读取所有的样式属性值。但是不能通过该方法去设置样式属性值。

currentStyle 获取的是一个元素的所有的样式属性值，这一点功能是与 getComputedStyle() 一样的，但是在获取某一个具体的属性的时候，可以结合 getAttribute 来实现。

和 getComputedStyle 方法不同的是，currentStyle 要获得属性名的话必须采用驼峰式的写法。也就是如果我需要获取 font-size 属性，那么传入的参数应该是 fontSize。因此在IE 中要获得单个属性的值，就必须将属性名转为驼峰形式。 ( 感谢这篇文章。 )

关于 getComputedStyle 返回的值，具体查看这里。

不管你最初定义的样式是什么，涉及到宽度高度之类的，返回的都是最后实际使用的宽度和高度。

关于 elestyle 的返回值，是和定义的样式的值相等的，如果设置为auto，就直接返回auto。

然后是元素的高宽，对于一个没有设定高宽的元素而言，在 IE678 下使用 getPropertyValue("width|height") 得到的是 auto 。而标准浏览器会直接返回它的 px 值，当然我们希望在 IE 下也返回 px 值。

这里的 HACK 方法是使用 elementgetBoundingClientRect() 方法。

elementgetBoundingClientRect() -- 可以获得元素四个点相对于文档视图左上角的值 top、left、bottom、right ，通过计算就可以容易地获得准确的元素大小。

参考链接 chokcoco的博客园

以上就是关于如何在代码中获取attr属性的值全部的内容，包括:如何在代码中获取attr属性的值、如何用js获取某个img标签节点的所有属性名、原生js获取元素的样式style属性值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！