注意:1、CSS中的float属性是个例外,因为float是javascript的保留关键字,在IE中使用的是styleFloat,而其他浏览器则使用cssFloat。

盒子标签和属性对照

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

styleFloat / cssFloat

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

html中td.class="aaa"

td.className="aaa"

webkit内核部分新增

CSS3

JavaScript 语法(区分大小写)

box-shadow

elemmnt.style.webkitBoxShadow

transform

elemmnt.style.webkitTransform

transform:translate

elemmnt.style.webkitTransform = “translate(px,px)”;

transform:scale

elemmnt.style.webkitTransform = “scale(x,y)”;

transform:rotate

elemmnt.style.webkitTransform = “rotate(deg)”;

transform:skew

elemmnt.style.webkitTransform = “skew(deg)”;

transform-origin

elemmnt.style.webkitTransformOrigin

transform-style

elemmnt.style.webkitTransformStyle

transition-property

elemmnt.style.webkitTransformProperty

transition-duration

elemmnt.style.webkitTransitionDuration

transition-timing-function

elemmnt.style.webkitTransitionTimingFunction

transition-delay

elemmnt.style.webkitTransitionDelay

animation-name

elemmnt.style.webkitAnimationName

animation-duration

elemmnt.style.webkitAnimationDuration

animation-timing-function

elemmnt.style.webkitAnimationTimingFunction

animation-iteration-count

elemmnt.style.webkitAnimationIterationCount

animation-direction

elemmnt.style.webkitAnimationDirection

animation-play-state

elemmnt.style.webkitAnimationPlayState

animation-delay

elemmnt.style.webkitAnimationDelay

background linear-gradient

elemmnt.style.background = “-webkit-gradient(linear, ~~)”;

background radial-gradient

elemmnt.style.background = “-webkit-gradient(radial, ~~)”;

text-shadow

elemmnt.style.textShadow

box-sizing

elemmnt.style.webkitBoxSizing

border-radius

elemmnt.style.webkitBorderRadius

border-top-left-radius

elemmnt.style.webkitBorderTopLeftRadius

border-top-right-radius

elemmnt.style.webkitBorderTopRightRadius

border-bottom-left-radius

elemmnt.style.webkitBorderBottomLeftRadius

border-bottom-right-radius

elemmnt.style.webkitBorderBottomRightRadius

border-image

elemmnt.style.webkitBorderImage

border-image-source

elemmnt.style.webkitBorderImageSource

border-image-slice

elemmnt.style.webkitBorderImageSlice

border-image-width

elemmnt.style.webkitBorderImageWidth

border-image-outset

elemmnt.style.webkitBorderImageOutset

border-image-repeat

elemmnt.style.webkitBorderImageRepeat

CSS和JS样式属性对照表的更多相关文章

  1. CSS和Js样式属性的对照关系

    注意:1.在使用js时,如newTD.style.paddingLeft="200";(错误),正确生效的写法是newTD.style.paddingLeft="200p ...

  2. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值1

    CSS中的样式属性比较多,经常使用的属性可以分为这么几类:字体.文本.背景.位置.边框.列表,以及其他一些样式属性.每个类中的属性都可以单独使用:如果同一个类中多个属性一起使用,还可以将它们整合为一行 ...

  3. CSS控制列表样式属性list-style有哪些?怎么用?

    CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...

  4. SpringMVC配置了拦截器(interceptors)却显示不出css、js样式的解决办法

    首先因为在web.xml里面配置了 <filter-mapping> <filter-name>characterEncodingFilter</filter-name& ...

  5. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值4

    6  鼠标光标属性 在网页中默认的鼠标指针只有两种,一种是最普通的箭头,另一种是当移动到链接上时出现的“小手”.但现在越来越多的网页都使用了CSS鼠标指针技术,当将鼠标移动到链接上时,可以看到多种不同 ...

  6. 今天写了一个SSM小项目,运行之后,前端页面的CSS、js样式显示不出来,具体操作如下:

    因为SSM中我们设置了拦截器,拦截器会拦截CSS和JS,所有样式渲染不出来,在Web.xml中写上 1 <servlet-mapping> 2 <servlet-name>de ...

  7. HTML、CSS、JS 样式 (未整理)

    随手记,有错误的地方希望留言 ^.-.^ PHP 实现关闭浏览器窗口echo "<script>window.close();</script>"; jqu ...

  8. iOS实现 webView loadHTMLString加载外部css、js样式

    记录一下. webview(或wk)用 loadHTMLString加载内容时 ,如果只是单纯的html内容,样式等都写在内部,直接设置baseURL为nil即可. 不过当html里包含外部样式或调用 ...

  9. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值3

    5  边框属性 边框属性用于设置一个元素的边框风格.边框宽度.边框颜色,可以一起设置4条边的边框,也可对上边框.右边框.下边框和左边框单独设置.分别介绍如下. a.边框风格属性 可以通过边框风格属性b ...

随机推荐

  1. (转载)链表环中的入口点 编程之美 leecode 学习

    http://www.cnblogs.com/hiddenfox/p/3408931.html 说的很细 /** * Definition for singly-linked list. * clas ...

  2. Java笔记(十三)……面向对象III继承(inheritance)

    继承概述 继承概述 多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中,那么多个类无需再定义这些属性和行为,只要继那个类即可. 多个类可以称为子类,单独这个类称为父类或者超类. 子类可以直接访 ...

  3. Codeforces Round #343 (Div. 2) D - Babaei and Birthday Cake 线段树+DP

    题意:做蛋糕,给出N个半径,和高的圆柱,要求后面的体积比前面大的可以堆在前一个的上面,求最大的体积和. 思路:首先离散化蛋糕体积,以蛋糕数量建树建树,每个节点维护最大值,也就是假如节点i放在最上层情况 ...

  4. hadoop部署小结的命令

    hadoop部署总结的命令 学习笔记,转自:hadoop部署总结的命令http://www.aboutyun.com/thread-5385-1-1.html(出处: about云开发)

  5. HW4.45

    public class Solution { public static void main(String[] args) { int count = 0; for(int i = 1; i < ...

  6. ural 1091. Tmutarakan Exams 和 codeforces 295 B. Greg and Graph

    ural 1091 题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1091 题意是从1到n的集合里选出k个数,使得这些数满足gcd大于1 ...

  7. mysql group by 用法解析(详细)

    在使用mysql时,有时需要查询出某个字段不重复的记录,虽然mysql提供 有distinct这个关键字来过滤掉多余的重复记录只保留一条,但往往只用它来返回不重复记录的条数,而不是用它来返回不重记录的 ...

  8. 百度参投 Uber中国12亿美元融资已到账

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  9. PC-老鸟装机

    老鸟装机 一.硬件安装莫疏忽   1>安装硬盘有讲究     1.单硬盘+单光驱       IDE1----硬盘(Mastet接口)       IDE2----光驱(Mastet接口)    ...

  10. oracle flashback

    一.Flashback闪回技术概述:当Oracle数据库发生逻辑错误时,必须使用flashback技术,实现快速和方便的恢复数据.对于人为错误,要确定受到错误事务影响的对象或者记录是非常困难的.使用f ...