浅析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 相关文章推荐
使一个函数作为另外一个函数的参数来运行的javascript代码
Aug 13 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
原生js的数组除重复简单实例
May 24 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
深入理解Node module模块
Mar 26 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 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中批量替换文件名的实现代码
2011/07/20 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
使用PHP开发留言板功能
2019/11/19 PHP
jquery实现居中弹出层代码
2010/08/25 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
Python selenium文件上传方法汇总
2020/11/19 Python
mac系统安装Python3初体验
2018/01/02 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
出纳岗位职责模板
2013/11/27 职场文书
远程教育心得体会
2014/01/03 职场文书
会计职业生涯规划范文
2014/01/04 职场文书
经典广告词大全
2014/03/14 职场文书
公司离职证明标准范本
2014/10/05 职场文书
2015年教师节慰问信
2015/03/23 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
PHP策略模式写法
2021/04/01 PHP
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技