zoukankan      html  css  js  c++  java
  • CSS和JS样式属性对照表

    注意:1、在使用js时,如newTD.style.paddingLeft="200";(错误),正确生效的写法是newTD.style.paddingLeft="200px";(正确),不可少了px,否则不会生效。2CSS中的float属性是个例外,因为floatjavascript的保留关键字,在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

    htmltd.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

  • 相关阅读:
    How a webpage is loaded and displayed
    Tree知识总结
    Install Cassandra Locally
    axios接口封装
    Jsonp解决跨域问题
    react使用swiper,解决添加点击事件首位图片点击失效,解决轮播按钮被覆盖问题
    vue 生产环境和测试环境的配置
    vue使用远程在线更新代码
    vue.js axios实现跨域http请求接口
    leetcode每日一题(2020-05-27):974. 和可被 K 整除的子数组
  • 原文地址:https://www.cnblogs.com/go-jzg/p/6087938.html
Copyright © 2011-2022 走看看