在 HTML 中定义样式的方式有 3 种：
- 外联式：通过<link/>元素包含外部样式表文件；
- 嵌入式：通过<style>元素定义嵌入式样式；
- 内联式：通过元素的 style 特性定义的样式。
一般来说，内联式优先级最高，其次是嵌入式。当然，这是一个很笼统的描述，更多关于 css 样式优先级请。
访问元素的样式
style 属性访问"内联样式"
任何支持 style 特性的 HTML 元素在 JavaScript 中都有一个对应的 style 属性。这个 style 对象是 CSSStyleDeclaration 的实例，只包含所有内联样式。
要注意的是，由于JavaScript 命名不支持"-"符号，所以 css 样式中带"-"的样式必须转换成驼峰式名，例如 "font-size" 需要写成 "fontSize" 。
style 对象除了 css 样式属性外，还包含如下属性和方法：
- cssText ：可读写，访问/修改内联样式的字符串值，与ele.geAttribute('style')的值相同。
- length ：元素的 css 属性的数量，注意，某些 css 样式是多种样式的简写，如 "background" 其实包含 "background-image" 等样式，而此属性获取到的数量是非简写的数量。
- getPropertyPriority(propertyName) ：获取 css 属性的优先级字符。即该样式设置了 "!important" 则返回 "important" ；否则返回空字符。
- getPropertyValue(propertyName) ：获取 css 属性的值。
- removeProperty(propertyName) ：移除指定 css 属性。
- setProperty(propertyName, value, priority) ：设置指定 css 属性的值和优先级，priority 为空字符则表示不设置优先级。
可以看以下例子：
这是一段文本...复制代码
// 获取指定元素let ele = document.getElementById('myDiv');// 获取元素的 style 属性let styl = ele.style;console.log(styl.cssText); // "background: red; color: green;"// 修改字体大小为 "18px" , 注意要使用驼峰式styl.fontSize = '18px';// 设置 background 样式，并添加"优先级字符"styl.setProperty('background', 'blue', 'important');console.log(styl.getPropertyPriority('background')); // "important"console.log(styl.getPropertyValue('background')); // "blue"// 移除 "color" 样式styl.removeProperty('color');console.log(styl.cssText); // "background: blue !important; font-size: 18px;"console.log(ele.getAttribute('style')); // "background: blue !important; font-size: 18px;"console.log(styl.length); // 11// 修改 cssText 属性styl.cssText = ""console.log(styl.cssText); // ""复制代码 获取计算后的 css 样式
使用document.defaultView.getComputedStyle(element, pseudoClasses?)可以获得计算后的 css 样式，即组合内联、外联、嵌入的样式计算的结果。
element 表示需要计算的元素对象；pseudoClasses 表示伪类字符串，如 ":hover"、"::after" 等，计算元素本身则忽略此参数。要注意的是，与用户交互相关的伪类(如"hover"等)，只有处于"激活"状态才会获得伪类的计算值，否则是元素本身的计算值。
返回的值是 CSS2Properties 对象，可以通过方括号运算获得指定的 css 属性值。只读。
其他
还有一个关于可以获取整个文档的 css 样式列表，包括外联和嵌入，就是使用 document.styleSheet 。但实用性不大，不多介绍。