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 相关文章推荐
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
探索Vue高阶组件的使用
Jan 08 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
Vue的路由及路由钩子函数的实现
Jul 02 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截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
一个简单php扩展介绍与开发教程
2010/08/19 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
Python中用Decorator来简化元编程的教程
2015/04/13 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
python实现在控制台输入密码不显示的方法
2015/07/02 Python
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
python实现简单图书管理系统
2019/11/22 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
会计与出纳自荐书范文
2014/03/16 职场文书
房屋产权证明书
2014/10/15 职场文书
联欢会开场白
2015/06/01 职场文书
诚信考试主题班会
2015/08/17 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技
HttpClient实现文件上传功能
2022/08/14 Java/Android