zoukankan      html  css  js  c++  java
  • CSS和Js样式属性的对照关系

    注意:1、在使用js时,如newTD.style.paddingLeft="200";(错误),正确生效的写法是newTD.style.paddingLeft="200px";(正确),不可少了px,否则不会生效。

    背景:用户说拿Jquery做图片缩放旋转裁剪效率底下,于是想到了可以用css3的style来做,或者用canvas标签,

    IE10内核,微信内核,chrome内核,safari内核对css3支持好像不太一样,我擦,搞死人。

    盒子标签和属性对照
    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
    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"
    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
  • 相关阅读:
    聊聊click延迟和点击穿透
    setAttribute的浏览器兼容性(转)
    浅谈JS中的高级函数
    跨域总结
    本地存储小结
    ubuntu下pip的安装和使用
    并发编程艺术-锁类型以及底层原理
    HTTP协议以及HTTP2.0/1.1/1.0区别
    Paxos
    jvm垃圾收集器总结jdk1.7
  • 原文地址:https://www.cnblogs.com/marszhw/p/5981192.html
Copyright © 2011-2022 走看看