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 相关文章推荐
js去除重复字符串两种实现方法
Jan 09 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
小程序实现背景音乐播放和暂停
Jun 19 Javascript
vue使用节流函数的踩坑实例指南
May 20 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
PHP Error与Logging函数的深入理解
2013/06/03 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
中国最大的名表商城:万表网
2016/08/29 全球购物
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
什么是索引指示器
2012/08/20 面试题
技术总监个人的自我评价范文
2013/12/18 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
2015高考寄语集锦
2015/02/27 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
钱学森电影观后感
2015/06/04 职场文书
十二生肖观后感
2015/06/12 职场文书
安全第一课观后感
2015/06/18 职场文书