CSS和Js样式属性的对照关系

注意：1、在使用js时，如newTD.style.paddingLeft="200";(错误)，正确生效的写法是newTD.style.paddingLeft="200px";(正确)，不可少了px，否则不会生效。

背景：用户说拿Jquery做图片缩放旋转裁剪效率底下，于是想到了可以用css3的style来做，或者用canvas标签，

IE10内核，微信内核，chrome内核，safari内核对css3支持好像不太一样，我擦，搞死人。

盒子标签和属性对照
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
颜色和背景标签和属性对照
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
html中td.class="aaa"	td.className="aaa"

CSS3	JavaScript
box-shadow	elemmnt.style.webkitBoxShadow
transform	elemmnt.style.webkitTransform
transform:translate	elemmnt.style.webkitTransform = “translate(px,px)”;
transform:scale	elemmnt.style.webkitTransform = “scale(x,y)”;
transform:rotate	elemmnt.style.webkitTransform = “rotate(deg)”;
transform:skew	elemmnt.style.webkitTransform = “skew(deg)”;
transform-origin	elemmnt.style.webkitTransformOrigin
transform-style	elemmnt.style.webkitTransformStyle
transition-property	elemmnt.style.webkitTransformProperty
transition-duration	elemmnt.style.webkitTransitionDuration
transition-timing-function	elemmnt.style.webkitTransitionTimingFunction
transition-delay	elemmnt.style.webkitTransitionDelay
animation-name	elemmnt.style.webkitAnimationName
animation-duration	elemmnt.style.webkitAnimationDuration
animation-timing-function	elemmnt.style.webkitAnimationTimingFunction
animation-iteration-count	elemmnt.style.webkitAnimationIterationCount
animation-direction	elemmnt.style.webkitAnimationDirection
animation-play-state	elemmnt.style.webkitAnimationPlayState
animation-delay	elemmnt.style.webkitAnimationDelay
background linear-gradient	elemmnt.style.background = “-webkit-gradient(linear, ~~)”;
background radial-gradient	elemmnt.style.background = “-webkit-gradient(radial, ~~)”;
text-shadow	elemmnt.style.textShadow
box-sizing	elemmnt.style.webkitBoxSizing
border-radius	elemmnt.style.webkitBorderRadius
border-top-left-radius	elemmnt.style.webkitBorderTopLeftRadius
border-top-right-radius	elemmnt.style.webkitBorderTopRightRadius
border-bottom-left-radius	elemmnt.style.webkitBorderBottomLeftRadius
border-bottom-right-radius	elemmnt.style.webkitBorderBottomRightRadius
border-image	elemmnt.style.webkitBorderImage
border-image-source	elemmnt.style.webkitBorderImageSource
border-image-slice	elemmnt.style.webkitBorderImageSlice
border-image-width	elemmnt.style.webkitBorderImageWidth
border-image-outset	elemmnt.style.webkitBorderImageOutset
border-image-repeat	elemmnt.style.webkitBorderImageRepeat

巴特西

CSS和Js样式属性的对照关系

最新文章

热门文章