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 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
Array.prototype.slice.apply的使用方法
Mar 17 Javascript
JavaScript 异步方法队列链实现代码分析
Jun 05 Javascript
js 幻灯片的实现
Dec 06 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
web css实现整站样式互相切换
Oct 29 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
微信小程序 教程之事件
Oct 18 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
vue实现分页栏效果
Jun 28 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
ASP和PHP都是可以删除自身的
2007/04/09 PHP
php实现httpclient类示例
2014/04/08 PHP
php eval函数一句话木马代码
2015/05/21 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
javascript 定义新对象方法
2010/02/20 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
基于node实现websocket协议
2016/04/25 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
详解A标签中href=""的几种用法
2017/08/20 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
python实现代码行数统计示例分享
2014/02/10 Python
python根据路径导入模块的方法
2014/09/30 Python
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
python删除某个目录文件夹的方法
2020/05/26 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
自荐信结尾
2013/10/27 职场文书
一名老师的自我评价
2014/02/07 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
公司合作意向书范文
2014/07/30 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
学校后勤工作总结2015
2015/05/15 职场文书