浅析JavaScript中的CSS属性及命名规范


Posted in Javascript onNovember 28, 2013

许多CSS样式属性的名字中都有连字符,在JavaScript中,连字符被解释为减号。

因此,CSS2Properties对象的属性名和真正的CSS属性名有点不同。

如果一个CSS属性名含有一个或多个连字符,在JS中则需要删除了连字符,并且原来紧接在连字符后的字母改为大写。

要注意的是float是JS的关键字,所以在JS中float被写作cssFloat与或floatStyle。

下面是CSS自身属性与JavaScript中CSS编码对照表:

盒子标签和属性对照:
Code
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(ie) cssFloat(FF) 
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

 

颜色和背景标签和属性对照:
Code
CSS语法 (不区分大小写)

JavaScript语法 (区分大小写)
background

background
background-attachment

backgroundAttachment
background-color

backgroundColor
background-image

backgroundImage
background-position

backgroundPosition
background-repeat

backgroundRepeat
color

color

样式标签和属性对照:

Code
CSS语法 (不区分大小写)

JavaScript语法 (区分大小写)
display

display
list-style-type

listStyleType
list-style-image

listStyleImage
list-style-position

listStylePosition
list-style

listStyle
white-space

whiteSpace

文字样式标签和属性对照:

Code
CSS语法 (不区分大小写)

JavaScript语法 (区分大小写)
font

font
font-family

fontFamily
font-size

fontSize
font-style

fontStyle
font-variant

fontVariant
font-weight

fontWeight

 

文本标签和属性对照:
Code
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 相关文章推荐
LBS blog sql注射漏洞[All version]-官方已有补丁
Aug 26 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
Jul 01 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 Javascript
JavaScript中的连字符详解
Nov 28 #Javascript
Google (Local) Search API的简单使用介绍
Nov 28 #Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 #Javascript
asm.js使用示例代码
Nov 28 #Javascript
jquery实现动态菜单的实例代码
Nov 28 #Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 #Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 #Javascript
You might like
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
PDO::prepare讲解
2019/01/29 PHP
斜45度寻路实现函数
2009/08/20 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
python调用fortran模块
2016/04/08 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
师范应届生教师求职信
2013/11/05 职场文书
探亲邀请信范文
2014/01/30 职场文书
校园安全检查制度
2014/02/03 职场文书
高中打架检讨书
2014/02/13 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
学习型党组织心得体会
2014/09/12 职场文书
二手房购房意向书
2015/05/09 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL