切换属性 jQuery - JavaScript

在开发 web 应用的过程中，经常需要对元素的属性进行操作。在 jQuery 和 JavaScript 中，我们可以使用一些方法来切换元素的属性。

切换类属性

jQuery

使用 jQuery 的 addClass() 和 removeClass() 方法可以添加和删除元素的类。

// 添加类
$("selector").addClass("class-name");

// 删除类
$("selector").removeClass("class-name");

JavaScript

使用 JavaScript 的 classList.add() 和 classList.remove() 方法可以添加和删除元素的类。

// 添加类
document.querySelector("selector").classList.add("class-name");

// 删除类
document.querySelector("selector").classList.remove("class-name");

切换布尔属性

jQuery

使用 jQuery 的 prop() 方法可以切换元素的布尔属性，如 disabled、checked 等。

// 切换 disabled 属性
$("selector").prop("disabled", true);

// 切换 checked 属性
$("selector").prop("checked", false);

JavaScript

使用 JavaScript 的 setAttribute()、removeAttribute() 和 hasAttribute() 方法可以切换元素的布尔属性，如 disabled、checked 等。

// 切换 disabled 属性
document.querySelector("selector").setAttribute("disabled", true);

// 切换 checked 属性
document.querySelector("selector").removeAttribute("checked");

// 判断是否存在 disabled 属性
document.querySelector("selector").hasAttribute("disabled"); // 返回 true 或 false

切换自定义属性

jQuery

使用 jQuery 的 attr() 方法可以切换元素的自定义属性。

// 切换自定义属性
$("selector").attr("data-name", "new-value");

JavaScript

使用 JavaScript 的 dataset 属性和 getAttribute()、setAttribute() 方法可以切换元素的自定义属性。

// 切换自定义属性
document.querySelector("selector").dataset.name = "new-value";

// 获取自定义属性值
document.querySelector("selector").getAttribute("data-name");

// 设置自定义属性值
document.querySelector("selector").setAttribute("data-name", "new-value");

以上就是切换属性 jQuery - JavaScript 的方法介绍，希望对你有所帮助！