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样式属性对照表相关推荐

colordialog通过哪属性取其颜色_IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值1...
CSS中的样式属性比较多,经常使用的属性可以分为这么几类:字体.文本.背景.位置.边框.列表,以及其他一些样式属性.每个类中的属性都可以单独使用:如果同一个类中多个属性一起使用,还可以将它们整合为一行 ...
idea修改css，js样式浏览器没更新问题
idea修改css,js样式浏览器没更新问题最近写项目经常遇到这么个问题,在项目里更改了css源文件,target或者out文件目录下css也更新了,但到了浏览器上就是没更新,具体更没更,大家可以在 ...
CSS控制列表样式属性list-style有哪些？怎么用？
CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...
html ul list style,CSS list-style列表样式属性用法介绍
list-style我们使用得最多的地方就是ul li中了,但很多朋友都搞不清楚•list-style-type,•list-style-position,•list-style-image具体的区别 ...
Css的字体样式属性大全
转:http://www.divcss5.com/rumen/r27838.shtml CSS 属性: 字体样式(Font Style) 1 字体样式 {font:font-style font-va ...
CSS面试须知--样式属性
属性书写顺序: 布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,关系到模式) 自身属 ...
学前端开发技术，CSS的文本样式属性值
一.如何入门,学习建议在你开始入手学习前,有一些小的建议.根据我自己学习的经验发现,这些建议在现在乃至我以后的岗位生涯里都是有很大帮助的.还有就是开始学习前,建议可以先花几天时间,查找一些如何入门的 ...
css 如何重设外部样式的属性值_IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值5...
CSS综合实例在Web页面中经常使用栏目显示分类内容.本例将使用HTML和CSS结合编写一个分类栏目模型,用于演示前面介绍的CSS应用.通过使用独立的文件定义样式表,并在HTML文档中使用link标 ...
css文本外观属性中设置字体,css 文本外观属性(text) 和字体样式属性(font)
css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距对中文无效 line ...

CSS和JS样式属性对照表

CSS和JS样式属性对照表相关推荐

最新文章

热门文章