用js给html设置style

时间：2021-07-06 05:37:28
 [html] view plaincopyprint?

 原贴地址:<a href="http://heichong.iteye.com/blog/860698">http://heichong.iteye.com/blog/860698</a>

 [html] view plaincopyprint?

 关键字: 用js给html表单设置style

 首先，把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   

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

 <HTML>

  <HEAD>

   <TITLE> New Document </TITLE>

  </HEAD>

 <script language="javascript">

 function validate(){

       if (document.all("name").value == ""){

             document.all("name").style["borderColor"]="red";//就是这里

             return;

         }

 }

 </script>

  <BODY>

   <input type="text" name="name" >

  </BODY>

 </HTML>

相关文章