（JS基础）DOM：样式

在 HTML 中定义样式的方式有 3 种：

• 外联式：通过<link/>元素包含外部样式表文件；
• 嵌入式：通过<style>元素定义嵌入式样式；
• 内联式：通过元素的 style 特性定义的样式。
  

一般来说，内联式优先级最高，其次是嵌入式。当然，这是一个很笼统的描述，更多关于 css 样式优先级请点击链接。

访问元素的样式

要注意的是，由于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 为空字符则表示不设置优先级。
  

可以看以下例子：

<div id="myDiv" style="background:red;color:green">这是一段文本...</div>

// 获取指定元素
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 样式

还有一个关于可以获取整个文档的 css 样式列表，包括外联和嵌入，就是使用 document.styleSheet 。但实用性不大，不多介绍。