浅析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 相关文章推荐
JS字符串函数扩展代码
Sep 13 Javascript
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
性能优化之代码优化页面加载速度
Mar 01 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
Sep 26 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
vue渲染方式render和template的区别
Jun 05 Javascript
JavaScript中window和document用法详解
Jul 28 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模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
详解Django中Request对象的相关用法
2015/07/17 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
python中turtle库的简单使用教程
2020/11/11 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
西班牙在线药店:DosFarma
2020/03/28 全球购物
医学类导师推荐信范文
2013/11/19 职场文书
校园创业策划书
2014/01/14 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
检讨书怎么写
2015/01/23 职场文书
Kubernetes控制节点的部署
2022/04/01 Servers