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 相关文章推荐
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
JavaScript中获取元素索引的函数
Sep 10 Javascript
javascript中解析四则运算表达式的算法和示例
Aug 11 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
vue组件实例解析
Jan 10 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 Javascript
iview实现动态表单和自定义验证时间段重叠
Jan 10 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
如何对PHP程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
目录,文件操作详谈―PHP
2006/11/25 PHP
php实现的MySQL通用查询程序
2007/03/11 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
PDO::inTransaction讲解
2019/01/28 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
爱情寄语大全
2014/04/09 职场文书
安全环保演讲稿
2014/08/28 职场文书
暑假学习心得体会
2014/09/02 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书