zoukankan      html  css  js  c++  java
  • JS 对应CSS 样式

    首先,把CSS和JS标签style属性对照表了解了:

    CSS 和 JavaScript 标签 style 属性对照表:

    盒子标签和属性对照 颜色和背景标签和属性对照 样式标签和属性对照 文字样式标签和属性对照 文本标签和属性对照

    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代码示例:

    Html代码  
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
    <HTML>  
     <HEAD>  
      <TITLE> New Document </TITLE>  
     </HEAD>  
      
     <BODY>  
      <input type="text" name="name" >  
     </BODY>  
    </HTML>  

    js代码示例:

    Js代码  
    <script language="javascript">  
    function validate(){  
          if (document.all("name").value == ""){  
                document.all("name").style["borderColor"]="red";//就是这里  
                return;  
            }  
    }  
    </script>  
  • 相关阅读:
    opencv 图片像素x,y 访问!!!
    python numpy 三维数组 排序问题
    python+opencv水表识别
    tesseractOCR安装
    cookie 的寻找和使用以及页面滚动(python+selenium)
    你还在用a标签吗?——用button替代a
    js正则高级函数(replace,matchAll用法),实现正则替换(实测很有效)
    腾讯云服务器centos7.2+nginx(开启gzip压缩)+uwsgi+Django+react
    轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现,兼容ie低版本浏览器
    webstorm 添加css前缀(兼容)自动添加
  • 原文地址:https://www.cnblogs.com/newsouls/p/3223237.html
Copyright © 2011-2022 走看看