关于js设置html元素样式的信息

本文目录一览：

• 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”)