本文目录一览：
- 1、通过JS可以直接调用一个CSS样式表名来对HTML元素进行外观设置吗？
- 2、js问题：外部调用js，改变html某些元素的样式，及addEventListener的用法。
- 3、在js中如何改变html元素中的样式？
- 4、如何用js给html表单设置style
- 5、Javascript如何给HTML添加样式？
通过JS可以直接调用一个CSS样式表名来对HTML元素进行外观设置吗？
可以的，例子如下：
#div1 {
width: 200px;
height: 200px;
background-color: red;
}
#div1.aa {
border-radius: 50%;
background-color: #000;
}
div id="div1"/div
js部分可以用：
obj.className = 'aa' 这样就可以将aa的样式加到div上了。
写css样式的时候需要注意的是，由于id的优先级高， 所以如果想在class里覆盖id里的样式，需要给#div1.aa写样式。
js问题：外部调用js，改变html某些元素的样式，及addEventListener的用法。
script type="text/javascript" src="js/index.js"/script放到HTML加载完之后的位置试试，放在/body结束标签前面；
点击是不是focus，是click；
在js中如何改变html元素中的样式？
原型是用DOM的style属性方法：
Element.style.[styleDOMName] = "value";
Element：指定元素，用document.createElement / document.getElement获取元素obj
或者使用setAttribute方法：
Element.setAttribute('style','css代码');//会覆盖所有的原来在这个标签上style属性赋的值
Element.setAttribute('style',Element.getAttribute('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
Javascript如何给HTML添加样式？
//Way 1
(document.get..)(Element).style.styleAttr = "value";
//Way 2
(document.get..)(Element).setAttribute('style',(Element).getAttribute('style') + "value")
