日期:2014-05-17  浏览次数:20614 次

如何用js给html表单设置style
关键字: 用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>