CSS和JS样式属性对照表
注意: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 |
CSS和JS样式属性对照表的更多相关文章
- CSS和Js样式属性的对照关系
注意:1.在使用js时,如newTD.style.paddingLeft="200";(错误),正确生效的写法是newTD.style.paddingLeft="200p ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值1
CSS中的样式属性比较多,经常使用的属性可以分为这么几类:字体.文本.背景.位置.边框.列表,以及其他一些样式属性.每个类中的属性都可以单独使用:如果同一个类中多个属性一起使用,还可以将它们整合为一行 ...
- CSS控制列表样式属性list-style有哪些?怎么用?
CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...
- SpringMVC配置了拦截器(interceptors)却显示不出css、js样式的解决办法
首先因为在web.xml里面配置了 <filter-mapping> <filter-name>characterEncodingFilter</filter-name& ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值4
6 鼠标光标属性 在网页中默认的鼠标指针只有两种,一种是最普通的箭头,另一种是当移动到链接上时出现的“小手”.但现在越来越多的网页都使用了CSS鼠标指针技术,当将鼠标移动到链接上时,可以看到多种不同 ...
- 今天写了一个SSM小项目,运行之后,前端页面的CSS、js样式显示不出来,具体操作如下:
因为SSM中我们设置了拦截器,拦截器会拦截CSS和JS,所有样式渲染不出来,在Web.xml中写上 1 <servlet-mapping> 2 <servlet-name>de ...
- HTML、CSS、JS 样式 (未整理)
随手记,有错误的地方希望留言 ^.-.^ PHP 实现关闭浏览器窗口echo "<script>window.close();</script>"; jqu ...
- iOS实现 webView loadHTMLString加载外部css、js样式
记录一下. webview(或wk)用 loadHTMLString加载内容时 ,如果只是单纯的html内容,样式等都写在内部,直接设置baseURL为nil即可. 不过当html里包含外部样式或调用 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值3
5 边框属性 边框属性用于设置一个元素的边框风格.边框宽度.边框颜色,可以一起设置4条边的边框,也可对上边框.右边框.下边框和左边框单独设置.分别介绍如下. a.边框风格属性 可以通过边框风格属性b ...
随机推荐
- codeforce 660D Number of Parallelograms
题意:询问多少个矩形. 统计横纵坐标差,放进vector中 #include<cstdio> #include<cstring> #include<iostream> ...
- Linux下安装mysql5.6.11(找点有用的信息太费劲)(转)
Linux下安装mysql5.6.11(找点有用的信息太费劲) (2013-04-25 10:25:09) 1.申请阿里云Linux服务器 昨天在阿里云申请了一个免费试用5天的Linux云服务 ...
- va_start、va_end、va_list的使用
1:当无法列出传递函数的所有实参的类型和数目时,可用省略号指定参数表void foo(...);void foo(parm_list,...); 2:函数参数的传递原理函数参数是以数据结构:栈的形式存 ...
- Storm系列(十九)普通事务ITransactionalSpout及示例
普通事务API详解 1 _curtxid:" + _curtxid 46 + ",_tx.getTransactionId():&qu ...
- CentOS设置在同一窗口打开文件夹
默认情况下,CentOS双击文件夹会打开一个新窗口.这对于习惯Windows的用户会感觉非常别扭.其实,如果用鼠标中键双击文件夹,就不会打开新窗口了.当然,也可以按照如下设置: 1. 打开任意一个文 ...
- CentOS下源码安装Apache2.4+PHP5.4+MySQL5.5
一.准备(把所有的源文件放在‘/home/yuanjun’目录下) apr http://mirror.bjtu.edu.cn/apache/apr/apr-1.4.6.tar.gz apr-util ...
- JAVA Serialization 序列化
最近在做Android 项目时用到了WebView,可悲的是,在html上有无数用户的操作,而这些操作被JS返回给了Android的内存中,当深层的Activity开启时,之前的Activity很可能 ...
- 1、IIS常见的的问难及解决方法
配置IIS 7.5 出现的问题及解决办法: 1.问题: CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Tempor ...
- RH442之Tuned优化方案
系统优化 介绍: Tuned是监控并收集系统组件使用资源的守护进程,可根据收集信息动态调整系统,可调整CPU和网络资源的使用来提高活跃设备性能与不活跃设备电能消耗.通过tuned-adm中提供优化案例 ...
- android 数据库的升级与降级解决方案
在我们写的程序中不避免的需要升级.或者说需要改变业务逻辑,那这个时候就需要修改数据库的字段,来适应不同的表结构 我们一般写数据库都是操作一个继承至 SQLiteOpenHelper 的类 然后我们需要 ...