JavaScript--prop和attr的用法

无限循环者

已于 2023-08-09 10:42:58 修改

阅读量2.8k

点赞数 5

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2023-08-05 16:53:19 首次发布

本文链接：https://blog.csdn.net/m0_74293254/article/details/132087963

版权

JavaScript 专栏收录该内容

40 篇文章

订阅专栏

简介：

区别和联系

示例

简介：

在JavaScript中，prop和attr()是jQuery库提供的一个方法，用于获取或设置DOM元素的属性值。

prop()方法：

prop()方法用于获取或设置HTML元素的属性值。
通过prop()方法可以设置HTML元素的固有属性（如checked、disabled等）以及自定义属性。
语法：
获取属性值：$(selector).prop(propertyName)
设置属性值：$(selector).prop(propertyName, value)

其中，selector为选择器，可以是元素的标签名、类名、id等；propertyName为属性名称；value为要设置的属性值。

attr()方法：

attr()方法用于获取或设置HTML元素的属性值。
通过attr()方法可以设置HTML元素的标准属性（如id、class等）以及自定义属性。
语法：
获取属性值：$(selector).attr(attributeName)
设置属性值：$(selector).attr(attributeName, value)

其中，selector为选择器，可以是元素的标签名、类名、id等；attributeName为属性名称；value为要设置的属性值。

区别和联系

区别：

操作布尔属性：prop()方法可以准确地获取或设置HTML元素的布尔属性（如checked、disabled），而attr()方法在处理布尔属性时会返回字符串类型的属性值（"checked"、"disabled"）或undefined。
修改属性值：prop()方法修改属性值时，会直接修改DOM对象的属性值，而attr()方法则通过修改HTML属性来改变属性值。
兼容性：对于一些非标准的属性或属性命名，prop()方法在不同浏览器中可能存在兼容性问题，而attr()方法相对更加稳定。

联系：

获取属性值：prop()和attr()方法都可以用于获取HTML元素的属性值。
设置属性值：prop()和attr()方法都可以用于设置HTML元素的属性值。
自定义属性：prop()和attr()方法都可以用于操作自定义属性。

根据具体使用场景和需求，选择适合的方法来操作属性。通常情况下，对于输入型表单元素的状态切换，如复选框的选中状态、禁用状态等，推荐使用prop()方法；而对于其他属性的操作，如class、id等，可以根据需要选择使用prop()或attr()方法。

值得注意的是，自HTML5起，推荐使用data-*属性来存储自定义数据，可以使用data()方法来获取或设置这些数据。在这种情况下，attr()方法比prop()方法更适合处理data-*属性。

示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>示例页面</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      // 使用prop()方法设置复选框的checked属性
      $('#checkbox1').prop('checked', true);

      // 使用attr()方法设置按钮的disabled属性
      $('#button1').attr('disabled', 'disabled');

      // 使用prop()方法获取复选框的checked属性值
      var isChecked = $('#checkbox1').prop('checked');
      console.log('复选框已选中:', isChecked);

      // 使用attr()方法获取按钮的disabled属性值
      var isDisabled = $('#button1').attr('disabled');
      console.log('按钮被禁用:', isDisabled);
    });
  </script>
</head>
<body>
  <h1>示例页面</h1>

  <input type="checkbox" id="checkbox1">
  <label for="checkbox1">复选框</label>

  <button id="button1">按钮</button>
</body>
</html>

这个例子演示了使用prop()和attr()方法来操作HTML元素的属性。通过JavaScript代码，将复选框的checked属性设置为true，并将按钮的disabled属性设置为disabled。然后使用prop()和attr()分别获取复选框的checked属性值和按钮的disabled属性值，并在控制台输出。

通过这个例子，可以体会到prop()和attr()方法在HTML属性操作上的差异和联系。请注意，在使用这个例子时，确保已加载jQuery库。