.prop()与.attr()的区别

Question

.prop()与.attr()的区别

2491

因此，jQuery 1.6引入了新函数prop()。

$(selector).click(function(){
    //instead of:
    this.getAttribute('style');
    //do i use:
    $(this).prop('style');
    //or:
    $(this).attr('style');
})

或者在这种情况下它们做的是同样的事情吗？

如果我必须改用prop()，那么如果我切换到1.6版本，所有旧的attr()调用都会出错吗？

更新：

selector = '#id'

$(selector).click(function() {
    //instead of:
    var getAtt = this.getAttribute('style');
    //do i use:
    var thisProp = $(this).prop('style');
    //or:
    var thisAttr = $(this).attr('style');

    console.log(getAtt, thisProp, thisAttr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id='id' style="color: red;background: orange;">test</div>

控制台将getAttribute输出为字符串，将attr输出为字符串，但将prop输出为CSSStyleDeclaration类型。为什么？这对我的未来编程有什么影响吗？

（另请参考此fiddle：http://jsfiddle.net/maniator/JpUF2/）

- Naftali

17

这会引起你的浓厚兴趣：http://books.google.ca/books?id=2weL0iAfrEMC&pg=PT334&lpg=PT334&dq=html+attributes+vs+dom+properties&source=bl&ots=_9VAqAT03C&sig=C8llDHg4KHT7GjgSfqVqNMa8eqo&hl=en&ei=SFnATY47hezSAajPyJwF&sa=X&oi=book_result&ct=result&resnum=9&ved=0CFkQ6AEwCA#v=onepage&q=html%20attributes%20vs%20dom%20properties&f=false。 - user1385191

29

@Neal，这是因为这个变化超越了jQuery。HTML属性和DOM属性之间的差异非常大。 - user1385191

7

看到jQuery撤销了这些变更，我感到很难过。他们正在朝着错误的方向前进。 - user1385191

4

@Neal. 是的，这只会让问题更加复杂，而不是区分这两种方法。 - user1385191

6

“@BritishDeveloper，这个答案比简单地说‘总是使用x或y’要复杂得多，因为它取决于你想得到什么。你想要属性还是想要属性的值？它们是两个非常不同的东西。” - Kevin B

显示剩余12条评论

18个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- naor · Answer 1

通常您希望使用属性。仅在以下情况下使用属性：

获取自定义HTML属性（因为它不与DOM属性同步）。
获取不与DOM属性同步的HTML属性，例如获取标准HTML属性的“原始值”，如 <input value="abc">.

- NkS · Answer 2

9

attributes -> HTML

properties -> DOM

- NkS

10

我知道你想要说什么，但是HTML是一种标记语言，而DOM则是由HTML创建的表示。 DOM元素具有属性和属性值。 - t.niese

- Peter Girnus · Answer 3

在 jQuery 1.6 版本之前，attr() 方法有时在检索属性时会考虑属性值，这会导致相当不一致的行为。

引入 prop() 方法提供了一种明确地检索属性值，而 .attr() 检索属性的方法。

文档如下： jQuery.attr() 获取匹配的第一个元素的属性值。 jQuery.prop() 获取匹配的第一个元素的属性。

- Bob Stein · Answer 4

`.attr()`与`.prop()`的不同之处：能影响CSS选择器

这里有一个其他答案中未提到的问题。

CSS选择器[name=value]

会响应.attr('name', 'value')
但不总是响应.prop('name', 'value')

.prop()仅影响少数属性选择器

input[name]（感谢@TimDown）

.attr()影响所有属性选择器

input[value]
input[naame]
span[name]
input[data-custom-attribute]（.data('custom-attribute')也不会影响此选择器）

- user2657778 · Answer 5

温馨提示：在使用 prop() 方法时，以下是示例：

if ($("#checkbox1").prop('checked')) {
    isDelete = 1;
} else {
    isDelete = 0;
}

上面的函数用于检查复选框1是否被选中，如果选中：返回1；如果未选中：返回0。此处使用prop()函数作为GET函数。

if ($("#checkbox1").prop('checked', true)) {
    isDelete = 1;
} else {
    isDelete = 0;
}

上述函数用于勾选复选框1并始终返回1。现在，函数prop()用作SET函数。

不要搞混。

附：当我检查图片的src属性时，若src为空，则prop方法返回页面当前URL（错误），而attr方法返回空字符串（正确）。

- Parth Trivedi · Answer 6

1) 属性位于DOM中；而属性是在HTML中，被解析成DOM。

2) $( elem ).attr( "checked" ) (1.6.1+) "checked" (字符串) 会随着复选框状态改变而改变

3) $( elem ).attr( "checked" ) (pre-1.6) true (布尔值) 随着复选框状态改变而改变

大多数情况下，我们希望使用DOM对象，而不是自定义属性，如data-img、data-xyz。
当使用attr()和prop()访问checkbox值和href时，也存在一些差异，因为prop()会根据DOM输出从origin获取完整链接和复选框的(pre-1.6)布尔值。
我们只能使用prop访问DOM元素，否则会返回undefined。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>prop demo</title>
  <style>
    p {
      margin: 20px 0 0;
    }
    b {
      color: blue;
    }
  </style>

</head>

<body>

  <input id="check1" type="checkbox" checked="checked">
  <label for="check1">Check me</label>
  <p></p>

  <script>
    $("input").change(function() {
      var $input = $(this);
      $("p").html(
        ".attr( \"checked\" ): <b>" + $input.attr("checked") + "</b><br>" +
        ".prop( \"checked\" ): <b>" + $input.prop("checked") + "</b><br>" +
        ".is( \":checked\" ): <b>" + $input.is(":checked")) + "</b>";
    }).change();
  </script>

</body>

</html>

- Rishu Ranjan · Answer 7

在prop()和attr()之间还有一些需要考虑的因素：

selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked 和 defaultSelected 等应该使用 .prop() 方法进行检索和设置。这些没有相应的属性，只是属性。

对于输入类型为复选框的情况

   .attr('checked') //返回 checked
   .prop('checked') //返回 true
   .is(':checked') //返回 true

prop 方法返回选中、选择、禁用、只读等布尔值，而 attr 返回定义的字符串。因此，您可以直接在 if 条件中使用 .prop('checked')。
.attr() 调用 .prop() 内部，因此 .attr() 方法会比通过 .prop() 直接访问它们稍微慢一些。

- zawhtut · Answer 8

Gary Hole的回答非常相关，如果代码是这样编写的话，可以解决问题。

obj.prop("style","border:1px red solid;")

由于prop函数返回的是CSSStyleDeclaration对象，上述代码在某些浏览器中无法正常工作（在我的情况下使用IE8 with Chrome Frame Plugin进行测试）。

因此将其更改为以下代码：

obj.prop("style").cssText = "border:1px red solid;"

问题已解决。

.prop()与.attr()的区别

.attr()与.prop()的不同之处：能影响CSS选择器

`.attr()`与`.prop()`的不同之处：能影响CSS选择器