CSS 樣式程式語法JavaScriptjQueryJavaScript 修改 CSS 的值 (設置讀取 CSS)

JavaScript 設置/讀取 CSS 的值

通常直接在元素設置 style 時會遇到的問題、因為 style 和 JavaScript 在 CSS 上面的寫法會有些不同。

div.div1{background-color:#9acd32;
  font-size:3em; line-height:3em;
  padding:0px 20px;}
<div class="div1" style="color:#fff;">div1</div>
div1
<div class="div1" style="color:#fff;">div1</div>
var div = document.querySelector("div.div1");
div.style.backgroundColor = "#006400";

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

註 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>
div2
var div = document.querySelector("div.div1");
var cssCollection = window.getComputedStyle(div, null);
var result = cssCollection.getPropertyValue("background-color");
-


paddingpadding-top 會因瀏覽器不同、例如 null 或 0px 20px。

所以在複合的參數 border-top 要指明完整屬性 border-top-width , border-top-color 才能正確返回結果,意思就是交代清楚方向。



CSS Property Style 的屬性表示JavaScript Reference Style 的屬性表示
backgroundbackground
background-attachmentbackgroundAttachment
background-colorbackgroundColor
background-imagebackgroundImage
background-positionbackgroundPosition
background-repeatbackgroundRepeat
borderborder
border-bottomborderBottom
border-bottom-colorborderBottomColor
border-bottom-styleborderBottomStyle
border-bottom-widthborderBottomWidth
border-colorborderColor
border-leftborderLeft
border-left-colorborderLeftColor
border-left-styleborderLeftStyle
border-left-widthborderLeftWidth
border-rightborderRight
border-right-colorborderRightColor
border-right-styleborderRightStyle
border-right-widthborderRightWidth
border-styleborderStyle
border-topborderTop
border-top-colorborderTopColor
border-top-styleborderTopStyle
border-top-widthborderTopWidth
border-widthborderWidth
clearclear
clipclip
colorcolor
cursorcursor
displaydisplay
filterfilter
fontfont
font-familyfontFamily
font-sizefontSize
font-variantfontVariant
font-weightfontWeight
heightheight
leftleft
letter-spacingletterSpacing
line-heightlineHeight
list-stylelistStyle
list-style-imagelistStyleImage
list-style-positionlistStylePosition
list-style-typelistStyleType
marginmargin
margin-bottommarginBottom
margin-leftmarginLeft
margin-rightmarginRight
margin-topmarginTop
overflowoverflow
paddingpadding
padding-bottompaddingBottom
padding-leftpaddingLeft
padding-rightpaddingRight
padding-toppaddingTop
page-break-afterpageBreakAfter
page-break-beforepageBreakBefore
positionposition
floatstyleFloat
text-aligntextAlign
text-decorationtextDecoration
text-decoration: blinktextDecorationBlink
text-decoration: line-throughtextDecorationLineThrough
text-decoration: nonetextDecorationNone
text-decoration: overlinetextDecorationOverline
text-decoration: underlinetextDecorationUnderline
text-indenttextIndent
text-transformtextTransform
toptop
vertical-alignverticalAlign
visibilityvisibility
widthwidth
z-indexzIndex



列出所有樣式表的集合 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);
}

-