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 flash复制库类 Zero Clipboard
Jan 17 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
解决ie img标签内存泄漏的问题
Oct 13 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
vue导航栏部分的动态渲染实例
Nov 01 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 多维数组排序(usort,uasort)
2010/06/30 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
PHP实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
javascript hashtable实现代码
2009/10/13 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
python 切换root 执行命令的方法
2019/01/19 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
国际象棋商店:The Chess Store
2018/07/09 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
大专应届生个人的自我评价
2013/11/21 职场文书
环保建议书400字
2014/05/14 职场文书
大学生工作自荐书
2014/06/16 职场文书
校长四风对照检查材料
2014/09/27 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
公司2015年终工作总结
2015/05/26 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python
php双向队列实例讲解
2021/11/17 PHP