JavaScript 设置/读取 CSS 的值

通常直接在元素设置 style 时会遇到的问题、因为 style 和 JavaScript 在 CSS 上面的写法会有些不同。

div.div1{background-color:#9acd32;
  font-size:3em; line-height:3em;
  padding:0px 20px;}

Html (HyperText Markup Language)

<div class="div1" style="color:#fff;">div1</div>

var div = document.querySelector("div.div1");
div.style.backgroundColor = "#006400";

div.setAttribute("style", "background-color:gold;");

div.removeAttribute("style"); 

註 div1 的 color:#fff 会因 setAttribute 而被取代。颜色 #006400 转换成 RGB 之差异。

window.getComputedStyle() 读取 CSS 的值(只读)

window.getComputedStyle() 方法返回该对象所应用的样式表，并解析这些值可能包含的任何基本计算后报告元素的所有 CSS 属性的值。简单地使用 CSS 属性名称进行索引来访问。

getComputedStyle 的返回值是 resolved values 通常跟 CSS2.1 中的 computed values 是相同的值。

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

div.div1{background-color:#9acd32;
  font-size:3em; line-height:3em;
  padding:0px 20px;}

<div class="div1" style="color:#fff;">div1</div>

var div = document.querySelector("div.div1");
var cssCollection = window.getComputedStyle(div, null);
var result = cssCollection.getPropertyValue("background-color");

註 padding 及 padding-top 会因浏览器不同、例如 null 或 0px 20px。

所以在复合的参数 border-top 要指明完整属性 border-top-width , border-top-color 才能正确返回结果，意思就是交代清楚方向。

列出所有样式表的集合 Style Collection

可以比较浏览器不同之下的差异。

var div = document.querySelector("div.div1");
var getStyleCollection = window.getComputedStyle(div, null);
for (var i = 0; i < getStyleCollection.length; i++) {
  var cssName = getStyleCollection[i];
  var cssValue = window.getComputedStyle(div, null).getPropertyValue(cssName);
  $("#Results").append(cssName + " = " + cssValue);
}