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 相关文章推荐
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
小程序指纹验证的实现代码
Dec 04 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
vue 通过绑定事件获取当前行的id操作
Jul 27 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 Javascript
js代码编写无缝轮播图
Sep 13 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
windows中为php安装mongodb与memcache
2015/01/06 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
JavaScript关于select的相关操作说明
2010/01/13 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
vue中activated的用法
2021/01/03 Vue.js
python素数筛选法浅析
2018/03/19 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
学习十八大报告感言
2014/02/04 职场文书
物理研修随笔感言
2014/02/14 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP