Javascript 在性能和使用方面，我应该使用哪种方法（.attr（）vs.prop（））？

我已经研究过这个问题，并把我的解决方案放在下面的小提琴上。 请检查一下。。。 看这把小提琴：

---

希望这会有帮助…

$.prop=>可以用来获取DOM元素的属性，比如标记名，但是

---

$.attr=>用于获取DOM元素的属性，如style。

有一点不同

如果这是您的HTML：

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

区别 变量getAtt的值为颜色：红色；背景：橙色

thisProp的值是样式声明对象CSSStyleDeclaration

thisAttr的值为颜色：红色；背景：橙色；。 希望它有助于：

这里有一个明确的答案

我在网上找不到任何完整的列表。每个给出任何类型列表的人都只是复制jQuery1.6博客文章中给出的部分列表。关于第3条，Starx sortof在其对此处答案的评论中提到了这一点。通过一次体面的讨论，讨论得更详细。MDN和W3C规范还提到，属性中有各种接口，可以将它们设置为属性，尽管MDN实际上没有列出哪些是属性。MDN确实提到将属性接口用作setter比使用getAttribute更脆弱：

虽然这些接口通常由大多数HTML和XML元素共享，但对于DOM HTML规范中列出的特定对象，还有更专门的接口。但是，请注意，这些HTML接口仅适用于[HTML4.01]和[XHTML1.0]文档，不保证与任何未来版本的XHTML一起使用。HTML5草案确实声明它的目标是向后兼容这些HTML接口，但提到这些接口时，一些以前被弃用、支持差、很少使用或认为不必要的功能已经被删除。通过完全转移到DOM XML属性方法（如getAttribute），可以避免潜在的冲突

然而，现在似乎可以安全地假设，在Firefox和Chrome中呈现的任何HTML5 doctype页面都已经处于一个环境中，其中“不推荐的、不受支持的”etc接口已经被删除

因此，我使用boolean、string和int值针对每个HTML元素类型测试了jQuery博客中提到的每个属性以及非属性属性属性

使用1.7.2和1.8pre，无论您调用.prop还是attr，jQuery在内部都会实际使用.prop：

$("#id").click(function() {
    var getAtt = this.getAttribute('style');
    var thisProp = $(this).prop('style');
    var thisAttr = $(this).attr('style');
});

对于此处不考虑窗口、文档等的HTML元素，除非使用.attr，否则jQuery不会设置以下任何属性：

async, autofocus, autoplay, checked, controls, defer, disabled, hidden, loop,
multiple, open, readonly, required, scoped, selected

最后，jQuery将使用.prop或.attr设置以下属性列表。在上面的第一个列表中，jQuery始终使用.prop，而不管您是使用.attr还是.prop。对于此列表中的属性，jQuery使用您使用的任何东西。如果使用.prop，jQuery将使用.prop，反之亦然。无论哪种情况，结果都是一样的。因此，忽略任何潜在的语义考虑因素，仅考虑到prop比.attr快约2.5倍，jQuery 1.6.1博客文章建议使用.attr，但可以使用.prop，从而显著提高性能：

accept-charset, accesskey, bgcolor, buffered, codebase, contextmenu, datetime,
default, dirname, dropzone, form, http-equiv, icon, ismap, itemprop, kind, 
language, list, location, manifest, nodeName, nodeType, novalidate, pubdate, 
radiogroup, seamless, selectedIndex, sizes, srclang, style, tagName

更清楚这个答案看看

---

希望这能有所帮助……

-这个问题似乎很好地解释了不同之处。同时检查性能@Superdrac：首先你应该检查哪一个能满足你的需要。如果你得到了错误的结果，性能并不重要。现在就检查@这意味着唯一的区别是性能，但事实并非如此。他们做不同的事情。@Guffa现在好了吗？谢谢！！！非常感谢@Anto King谢谢你的帮助。。。

accept-charset, accesskey, bgcolor, buffered, codebase, contextmenu, datetime,
default, dirname, dropzone, form, http-equiv, icon, ismap, itemprop, kind, 
language, list, location, manifest, nodeName, nodeType, novalidate, pubdate, 
radiogroup, seamless, selectedIndex, sizes, srclang, style, tagName

accept, action, align, alt, autocomplete, border, challenge, charset, cite, 
class, code, color, cols, colspan, contenteditable, coords, data, defaultValue, 
dir, draggable, enctype, for, headers, height, hidden, high, href, hreflang, 
id, keytype, label, lang, low, max, maxlength, media, method, min, name, 
optimum, pattern, ping, placeholder, poster, preload, readonly, rel, required, 
reversed, rows, rowspan, sandbox, scope, shape, size, span, spellcheck, src, 
srcdoc, start, step, summary, tabindex, target, title, type, usemap, value, 
width, wrap