關於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”)