js中的attr方法详解|极客笔记

js中的attr方法详解

在JavaScript中，通过attr方法可以操作DOM元素的属性。attr方法主要用于获取和设置HTML元素的属性。

语法

$(selector).attr(name);

selector：表示要操作的元素，可以是元素的ID、类名、标签名等。
name：要获取或设置的属性名称。

获取属性值

使用attr方法可以获取指定元素的属性值。例如，获取id属性值：

// 获取id属性值
var idValue = $("#myElement").attr("id");

console.log(idValue); // 输出：myElement

设置属性值

attr方法还可以设置指定元素的属性值。例如，设置class属性值：

// 设置class属性值为"new-class"
 $("#myElement").attr("class", "new-class"); console.log($ ("#myElement").attr("class")); // 输出：new-class

示例

下面通过一个示例来演示attr方法的使用。假设我们有一个按钮，点击按钮后会改变按钮的颜色。

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>attr方法示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<button id="myBtn">点击我</button>

<script>
     $(document).ready(function(){$ ("#myBtn").click(function(){
            if ( $(this).attr("class") === "btn-red") {$ (this).attr("class", "btn-green");
            } else {
                $(this).attr("class", "btn-red");
            }
        });
    });
</script>

<style>
    .btn-red {
        background-color: red;
        color: white;
    }

    .btn-green {
        background-color: green;
        color: white;
    }
</style>

</body>
</html>

点击按钮后，按钮的颜色会在红色和绿色之间切换。