CSS样式 程式语法 JavaScript jQuery JavaScript 设置、读取 CSS 的值

JavaScript设置/读取CSS的值

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

div.div1{background-color:#9acd32; font-size:3em; line-height:3em; padding:0px 20px;}
div1
div1
div1
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;}
div1
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 的属性表示
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color borderColor
border-left borderLeft
border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
clear clear
clip clip
color color
cursor cursor
display display
filter filter
font font
font-family fontFamily
font-size fontSize
font-variant fontVariant
font-weight fontWeight
height height
left left
letter-spacing letterSpacing
line-height lineHeight
list-style listStyle
list-style-image listStyleImage
list-style-position listStylePosition
list-style-type listStyleType
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
overflow overflow
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
page-break-after pageBreakAfter
page-break-before pageBreakBefore
position position
float styleFloat
text-align textAlign
text-decoration textDecoration
text-decoration: blink textDecorationBlink
text-decoration: line-through textDecorationLineThrough
text-decoration: none textDecorationNone
text-decoration: overline textDecorationOverline
text-decoration: underline textDecorationUnderline
text-indent textIndent
text-transform textTransform
top top
vertical-align verticalAlign
visibility visibility
width width
z-index zIndex



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

-

Modification in