setAttribute()和setProperty()

setAttribute()和setProperty() 学习笔记

初学习完setAttribute()和setProperty()后，在项目中使用时不太清楚原理，总是一知半解，最近又遇到关于这两个属性的笔试题，决定更加深入的去理解这两个属性。

setAttribue()：

建议先看看attribute和property的区别，之后对setAttribute()和setProperty()就容易理解了。

我的简单总结

关于“特性”Attribute和“属性”Property的了解可以看这位大佬的文章https://www.cnblogs.com/wangfupeng1988/p/3631853.html

使用setAttribute()方法设置的是元素的“特性”——style（style同时也是对象的属性），也就是设置的是元素的内联样式。所以当你想要给一个元素设置颜色、背景色等在元素的style特性中存在的属性，应该这么写。

document.getElementById("div1").setAttribute("style","color:yellow;background-color:blue;");

setProperty()：

我在使用setProperty()的时候一般会这么写element.style.setProperty("XXX","XXX","XXX")。这里的style属性返回的是CSSStyleDeclaration对象。但是返回的这个对象只包含了内联样式,所以setProperty()这个方法也是设置的是内联样式。与setAttribute()不同的是setProperty()具有第三个参数，就是设置权重，若将第三个参数设置为important就可以增加属性的权重，改变优先级。

获得属性的方法：

获得属性有两种方法：getAttribute()和getComputedStyle()

getAttribute()用法：element.getAttribute()

getComputedStyle()用法:document.defaultView.getComputedStyle(element[,pseudo-element]);
或者
window.getComputedStyle(element[,pseudo-element]);第二个参数是伪类，可以省略。

二者的区别就是getComputedStyle()可以获得元素全部的样式，内联样式、嵌入样式、外部样式。getAttribute()只能获得内联样式。