js控制CSS样式属性语法对照表


Posted in Javascript onDecember 11, 2012

CSS与JS紧密配合,为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。

例如常用的关闭某个漂浮的广告显示:document.getElementById('ad').style.display='none';相当于:.ad{ display:none}.

下面就是JS 控制CSS样式表的语法对照:

盒子标签和属性对照
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
   
规律:"-"去掉,并把-后面的首字母换成大写  
Javascript 相关文章推荐
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
使用SVG基本操作API的实例讲解
Sep 14 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 #Javascript
ajax的hide隐藏问题解决方法
Dec 11 #Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 #Javascript
jQuery(非HTML5)可编辑表格实现代码
Dec 11 #Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 #Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 #Javascript
ajax不执行success回调而是执行了error回调
Dec 10 #Javascript
You might like
Zend引擎的发展 [15]
2006/10/09 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
python实现人人网登录示例分享
2014/01/19 Python
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
python内置数据类型之列表操作
2018/11/12 Python
python+requests接口自动化框架的实现
2020/08/31 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
印尼旅游网站:via
2017/11/12 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
邮政员工辞职信
2014/01/16 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
大学生找工作求职信
2014/07/09 职场文书
工程部经理岗位职责
2015/02/02 职场文书
科技馆观后感
2015/06/08 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python
React四级菜单的实现
2022/04/08 Javascript