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 相关文章推荐
IE6 fixed的完美解决方案
Mar 31 Javascript
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
js处理表格对table进行修饰
May 26 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
node实现的爬虫功能示例
May 04 Javascript
微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法
Feb 21 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 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实现用于验证所有类型的信用卡类
2015/03/24 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
python字符串过滤性能比较5种方法
2017/06/22 Python
利用Python破解斗地主残局详解
2017/06/30 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
Django工程的分层结构详解
2019/07/18 Python
Python日志处理模块logging用法解析
2020/05/19 Python
Python 使用office365邮箱的示例
2020/10/29 Python
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
单位刻章介绍信范文
2014/01/11 职场文书
上学迟到的检讨书
2014/01/11 职场文书
初中学生期末评语
2014/04/24 职场文书
保护环境建议书400字
2014/05/13 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server