jQuery 如何使用attr获取样式值

在本文中，我们将介绍如何使用jQuery中的attr方法来获取元素的样式值。

阅读更多：jQuery 教程

什么是attr方法

attr方法是jQuery中用于设置或获取元素属性值的函数。通过该方法可以获取元素的样式值。

获取样式值的语法

要获取元素的样式值，可以使用以下语法：

$(selector).attr(styleName);

其中，selector是要获取样式值的元素选择器，styleName是要获取的样式名称。

示例

接下来，我们通过几个示例来演示如何使用attr方法来获取样式值。

示例1：获取元素的宽度

首先，我们有一个div元素，其宽度为200px。我们可以使用attr方法来获取该元素的宽度值。

HTML代码：

<div id="myDiv" style="width: 200px;"></div>

JavaScript代码：

var width = $("#myDiv").attr("width");
console.log(width);  // 输出：200px

在上面的代码中，我们使用了attr方法来获取id为myDiv的元素的宽度值，并将其赋值给变量width。然后，我们通过console.log方法来打印出宽度值。

示例2：获取元素的颜色

接下来，我们演示如何获取元素的颜色。

HTML代码：

<p id="myPara" style="color: blue;">Hello World</p>

JavaScript代码：

var color = $("#myPara").attr("color");
console.log(color);  // 输出：blue

在上面的代码中，我们使用了attr方法来获取id为myPara的元素的颜色值，并将其赋值给变量color。然后，我们通过console.log方法来打印出颜色值。

注意事项

在使用attr方法获取样式值时，需要注意以下几点：
– attr方法只能获取通过HTML或CSS设置的样式值，无法获取通过JavaScript动态设置的样式值。
– 如果要获取通过JavaScript动态设置的样式值，可以使用prop方法。

总结

通过本文，我们学习了如何使用jQuery中的attr方法来获取元素的样式值。我们看到，attr方法可以非常方便地获取元素的样式值，并且可以通过选择器精确找到目标元素。同时，我们还注意到了attr方法无法获取通过JavaScript动态设置的样式值，需要使用prop方法代替。希望本文对你有所帮助，祝愉快编程！

参考链接：jQuery attr() Method