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 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
jquery 图片预加载 自动等比例缩放插件
Dec 25 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 Javascript
jQuery实现视频展示效果
May 30 jQuery
js实现随机圆与矩形功能
Oct 29 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 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 adodb操作mysql数据库
2009/03/19 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
Js+XML 操作
2006/09/20 Javascript
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
python插入排序算法的实现代码
2013/11/21 Python
python处理图片之PIL模块简单使用方法
2015/05/11 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
《影子》教学反思
2014/02/21 职场文书
陪护人员误工证明
2015/06/24 职场文书
婚宴领导致辞
2015/07/28 职场文书
2019年思想汇报
2019/06/20 职场文书
swagger如何返回map字段注释
2021/07/03 Java/Android