你们都知道,用document.getElementById(‘element’).style.xxx能够获取元素的样式信息,但是它获取的只是DOM元素style属性里的样式规则,对于经过class属性引用的外部样式表,就拿不到咱们要的信息了。 web
DOM标准里有个全局方法getComputedStyle,能够获取到当前对象样式规则信息,如:window.getComputedStyle(obj,null).paddingLeft,(obj表明获取的节点名,第二个参数表明获取伪元素信息,如‘:after’,不须要就null)就能获取到对象的左内边距。
可是事情还没完,万恶的IE不支持此方法,它有本身的一个实现方式,那就是currentStyle,不一样于全局方法getComputedStyle,它是做为DOM元素属性存在的,如:obj.currentStyle.paddingLeft,在IE中就获取到对象的左内边距了。具体的兼容性写法就留给大家本身研究了。 浏览器
而控制的方法就是统一的,如:obj.style.width='200px';
须要注意的就是CSS中用横线链接的属性如:line-height:10px;在js中就要写成obj.style.lineHeight='10px';
下面就是具体的CSS和JS对照的属性的写法。 测试
而对于CSS3新添加的属性须要写浏览器前缀。
如-webkit-transform:rotate(20deg); js对应的写法为obj.style.webkitTransform='rotate(20deg)';
可是我发现最新的火狐浏览器不识别obj.style.mozTransform='rotate(20deg)';
而识别obj.style.MozTransform='rotate(20deg)';
因此我建议写前缀仍是第一个字母大写,如Ms、Moz、Webkit,至少这三大浏览器都识别这种写法,其它的我没测试过。 spa
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
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
float floatStyle
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop orm
颜色和背景标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
color color
样式标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
display display
list-style-type listStyleType
list-style-image listStyleImage
list-style-position listStylePosition
list-style listStyle
white-space whiteSpace
文字样式标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
font font
font-family fontFamily
font-size fontSize
font-style fontStyle
font-variant fontVariant
font-weight fontWeight
文本标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
letter-spacing letterSpacing
line-break lineBreak
line-height lineHeight
text-align textAlign
text-decoration textDecoration
text-indent textIndent
text-justify textJustify
text-transform textTransform
vertical-align verticalAlign 对象
其中有什么错误的地方还望你们指出。 ip