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获取事件对象代码
Aug 05 Javascript
js中string转int把String类型转化成int类型
Aug 13 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
Bootstrap响应式表格详解
May 23 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
什么是SOLID
Mar 24 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使用curl发送json格式数据实例
2013/12/17 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
php中this关键字用法分析
2016/12/07 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
python+pyqt5编写md5生成器
2019/03/18 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
利用python实现汉诺塔游戏
2021/03/01 Python
预备党员党校学习自我评价分享
2013/11/12 职场文书
同学会邀请书大全
2014/01/12 职场文书
银行贷款承诺书
2014/03/29 职场文书
公司收款委托书范本
2014/09/20 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
美容院管理规章制度
2015/08/05 职场文书
创业计划书详解
2019/07/19 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
JavaScript分页组件使用方法详解
2021/07/26 Javascript