當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

CSS和JS样式属性对照表

發布時間：2025/6/17 javascript 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS和JS样式属性对照表小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

注意：1、在使用js時，如newTD.style.paddingLeft="200";(錯誤)，正確生效的寫法是newTD.style.paddingLeft="200px";(正確)，不可少了px，否則不會生效。2、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

轉載于:https://www.cnblogs.com/go-jzg/p/6087938.html

總結

以上是生活随笔為你收集整理的CSS和JS样式属性对照表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： JAVA学习三
下一篇： APP多版本共存，服务端如何兼容？