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 对象比较实现代码
Apr 27 Javascript
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
基于jquery的监控数据是否发生改变
Apr 11 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
Vue根据条件添加click事件的方式
Nov 09 Javascript
es6函数之rest参数用法实例分析
Apr 18 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 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
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
js实现tab切换效果
2017/02/16 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
Python中的字典遍历备忘
2015/01/17 Python
Python排序算法实例代码
2017/08/10 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
Python Gitlab Api 使用方法
2019/08/28 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
Python如何操作docker redis过程解析
2020/08/10 Python
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
加拿大时装零售商:Influence U
2018/12/22 全球购物
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
2014年库房工作总结
2014/11/26 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
MySQL 条件查询的常用操作
2022/04/28 MySQL