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 相关文章推荐
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 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作的文本留言本的例子(四)
2006/10/09 PHP
PHP 编写的 25个游戏脚本
2009/05/11 PHP
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
js post方式传递提交的实现代码
2010/05/31 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
Python中property函数用法实例分析
2018/06/04 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
python实现文件的分割与合并
2019/08/29 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
婚礼证婚人证婚词
2014/01/08 职场文书
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
家长会欢迎标语
2014/06/24 职场文书
结对共建协议书
2014/08/20 职场文书
关于工作经历的证明书
2014/10/11 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
《植树问题》教学反思
2016/03/03 职场文书
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js