这看起来像是使用setAttribute更好的一种情况:

高效的JavaScript

var posElem = document.getElementById('animation');
var newStyle = 'background: ' + newBack + ';' +
'color: ' + newColor + ';' +
    'border: ' + newBorder + ';';
if(typeof(posElem.style.cssText) != 'undefined') {
    posElem.style.cssText = newStyle;
} else {
    posElem.setAttribute('style', newStyle);
}

两者之间的一个区别是setAttribute，当用于设置<input/>的值时，将使该值成为它所在表单上调用.reset()时的默认值，但.value =不会这样做。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset

注意，如果调用setAttribute()来设置特定属性的值，则后续调用reset()不会将该属性重置为其默认值，而是将该属性保持setAttribute()调用设置的值。

来自Javascript: The Definitive Guide，它澄清了一些事情。它注意到HTML文档的HTMLElement对象定义了与所有标准HTML属性对应的JS属性。

因此，您只需要对非标准属性使用setAttribute。

例子:

node.className = 'test'; // works
node.frameborder = '0'; // doesn't work - non standard attribute
node.setAttribute('frameborder', '0'); // works

这是很好的讨论。我曾有过这样的时刻，我希望，或者让我说希望(我可以补充说，是成功的)重新发明轮子，不管它是正方形的。 上面的任何方法都是很好的讨论，所以任何来这里寻找Element属性和属性之间的区别的人。这是我最值钱的一分钱，我的确是费了好大劲才发现的。我会保持简单，所以没有特别的技术术语。

假设我们有一个变量a。我们所习惯的如下。

下面会抛出一个错误，因为它简单地写了它是一种只能有一个属性的对象，即单数左手边对象=单数右手边对象。其他的东西都被忽略，扔进垃圾桶。 let A = 'f'; A.b = 2; console.log (A.b);

谁决定它必须是单数=单数。那些制定JavaScript和html标准的人，这就是引擎工作的方式。

让我们换个例子。

let A = {}; A.b = 2; console.log (A.b);

这一次它工作.....因为我们已经明确地告诉它了，谁决定我们可以在这个例子中告诉它，而不是在以前的例子中。还是那些制定JavaScript和html标准的人。

我希望我们在这个问题上，让它进一步复杂化

let A = {}; A.attribute = {}; A.attribute.b = 5; console.log (A.attribute.b);//将工作 console.log (A.b);//将不起作用

我们所做的是第一层的树和非奇异对象的子层。除非你知道什么是哪里，并调用它，否则它将工作。

这就是HTMLDOM在为每个HTML元素创建解析和绘制DOm树时所发生的事情。每个都有不同级别的属性。有些是预定义的，有些不是。这就是ID和VALUE位发挥作用的地方。 在场景后面，它们在1级属性和sun级属性(属性)之间以1:1的比例映射。因此，改变一个就会改变另一个。这就是对象getter和setter方案的作用。

let A = { attribute :{ id:'', value:'' }, getAttributes: function (n) { return this.attribute[n]; }, setAttributes: function (n,nn){ this.attribute[n] = nn; if(this[n]) this[n] = nn; }, id:'', value:'' }; A.id = 5; console.log(A.id); console.log(A.getAttributes('id')); A.setAttributes('id',7) console.log(A.id); console.log(A.getAttributes('id')); A.setAttributes('ids',7) console.log(A.ids); console.log(A.getAttributes('ids')); A.idsss=7; console.log(A.idsss); console.log(A.getAttributes('idsss'));

如上所示，ELEMENTS有另一组所谓的属性列表属性，它有自己的主要属性。在两者之间有一些预定义的属性，并以1:1的比例映射，例如ID对每个人都是公共的，但value不是，src也不是。当解析器到达这一点时，它只是简单地调出字典，以确定何时出现这样那样的东西。

所有元素都有属性和属性，它们之间的一些项是公共的。在一个国家常见的东西在另一个国家并不常见。

在过去的HTML3时代，我们首先使用html，然后使用JS。现在的日子，它的其他方式，所以已经使用内联onclick成为如此令人憎恶。在HTML5中，有许多属性列表可以作为集合访问，例如类，样式。在过去，颜色是一个属性，现在被移动到css处理不再有效的属性。

元素。attributes是元素属性中的子属性列表。

除非你能改变Element属性的getter和setter，这几乎是不可能的，因为它会破坏所有的功能，通常是不能立即写出来的，只是因为我们定义了一个A.item并不一定意味着Js引擎也会运行另一行函数将它添加到Element.attributes.item中。

我希望这能进一步澄清什么是什么。 为了这个目的，我尝试了element。prototype。setattribute和自定义函数，它只是打破了所有的东西，因为它覆盖了本地的一堆函数，设置属性函数在幕后发挥作用。

我发现需要使用setAttribute的一种情况是在更改ARIA属性时，因为没有相应的属性。例如

x.setAttribute('aria-label', 'Test');
x.getAttribute('aria-label');

没有x。arialabel之类的东西，所以你必须使用setAttribute。

编辑:x["aria-label"]不工作。你确实需要setAttribute。

x.getAttribute('aria-label')
null
x["aria-label"] = "Test"
"Test"
x.getAttribute('aria-label')
null
x.setAttribute('aria-label', 'Test2')
undefined
x["aria-label"]
"Test"
x.getAttribute('aria-label')
"Test2"

如果您希望在JavaScript中进行编程访问，您应该始终使用直接的.attribute形式(但请参阅下面的quirksmode链接)。它应该正确地处理不同类型的属性(想想“onload”)。

使用getAttribute/setAttribute当你希望处理DOM，因为它是(例如，文字文本)。不同的浏览器会混淆这两者。参见怪癖模式:属性(在)兼容性。