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 相关文章推荐
JavaScript日历实现代码
Sep 12 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
JavaScript编写简单的计算器
Nov 25 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
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
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
php中require和require_once的区别说明
2014/02/27 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
JavaScript运算符小结
2015/06/03 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
python实现requests发送/上传多个文件的示例
2018/06/04 Python
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
环保倡议书怎么写
2014/05/16 职场文书
球队口号
2014/06/18 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
党员承诺书范文2015
2015/04/27 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
详解MySQL的半同步
2021/04/22 MySQL
python文件目录操作之os模块
2021/05/08 Python
Python中for后接else的语法使用
2021/05/18 Python
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸