CSS和JS样式属性对照表

时间:2022-07-28 15:03:51

注意:1、CSS中的float属性是个例外,因为float是javascript的保留关键字,在IE中使用的是styleFloat,而其他浏览器则使用cssFloat。

盒子标签和属性对照

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

styleFloat / cssFloat

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"

webkit内核部分新增

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