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);
}