JS DOM 编程复习笔记 -- 操作style样式、class、getComputedStyle（十一）

Answer 1

今天，我们将回顾JavaScript DOM如何实现内联样式修改、CSS类的修改以及获取元素的真实样式与尺寸。
内联样式修改

使用元素的style属性来操作内联样式。style属性返回CSS属性的CSSStyleDeclaration只读对象。例如，将元素的color设置为红色。对于包含“-”的CSS属性，如`-webkit-text-stroke`，可通过`[]`访问。若需批量覆盖现有样式，可使用cssText属性，或setAttribute()方法。可以封装函数，通过传入一个key-value对象给元素设置CSS样式。利用css()方法来设置样式。
获取内联样式

理论上，通过style属性可获取内联样式，但在实践中不常用，因为style不会返回其他地方的规则，如类样式。要获取元素的所有样式，使用window.getComputedStyle()方法。
getComputedStyle()方法

getComputedStyle()方法是window对象的一个方法，返回指定元素的样式对象。接受两个参数。例如，获取:hover状态a标签的所有CSS属性样式值，传递:hover参数。返回一个样式对象，是CSSStyleDeclaration对象的实例。
获取元素宽高

通过元素的offsetWidth和offsetHeight属性获取包含padding和border的元素宽度与高度。clientWidth和clientHeight属性用于获取包含padding但不包含border的元素宽度与高度。使用getComputedStyle()方法获取元素的margin与边框宽度。获取窗口宽度与高度。
类操作

使用className属性操作元素的CSS类。通过+=运算符增加到现有class中，使用=运算符完全覆盖class。获取元素完整class，利用classList属性操作。classList是只读的DOMTokenList对象，表示元素class属性的内容。可通过各种方法操作其中的类。
总结

回顾了通过JavaScript DOM操作内联样式、动态增删改查样式，对CSS类的操作，获取元素样式、尺寸与margin、border等知识。如需复习DOM知识，关注【小帅的编程笔记】微信公众号，每日更新。