什么是attr()属性方法并如何在前端开发中应用？

24 min read

attr() 函数用于获取 HTML 元素的属性值，或者设置 HTML 元素的属性值。以下是一些 attr() 函数的使用场景：

  1. 获取和设置元素属性：
<div id="myDiv" class="myClass">This is my div</div>

// 获取 class 属性值
let className = $("#myDiv").attr("class"); // "myClass"

// 设置 class 属性值
$("#myDiv").attr("class", "newClass");

// 获取多个属性值
let attributes = $("#myDiv").attr(["class", "id"]); // { class: "newClass", id: "myDiv" }
  1. 动态地设置元素属性值：
<button>Click me</button>

// 根据点击数动态设置按钮文本
let count = 0;
$("button").click(function() {
  count++;
  $(this).attr("data-clicks", count)
         .text(`Clicks: ${count}`);
});
  1. 获取 data-* 属性值：
<div id="myDiv" data-name="John" data-age="30"></div>

// 获取 data-name 和 data-age 属性值
let name = $("#myDiv").attr("data-name"); // "John"
let age = $("#myDiv").attr("data-age"); // "30"

这仅仅是 attr() 函数的一小部分使用场景，具体使用方式还取决于你的实际需求。