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 自动完成脚本整理(33个)
Oct 20 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
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
FCKeditor添加自定义按钮
2008/03/27 PHP
深入分析php之面向对象
2013/05/15 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
python获取糗百图片代码实例
2013/12/18 Python
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
Python跳出循环语句continue与break的区别
2014/08/25 Python
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
加热夹克:RAVEAN
2018/10/19 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
勤俭节约倡议书
2014/04/14 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
调研汇报材料范文
2014/08/17 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
2014年民警工作总结
2014/11/25 职场文书
建议书范文
2015/02/05 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书