HTML DOM Style 對(duì)象

目錄: 1、Style 對(duì)象; 2、使用 Style 對(duì)象屬性的語(yǔ)法：; 3、Style 對(duì)象的屬性：; 4、Background 屬性; 5、Border 和 Margin 屬性; 6、Layout 屬性; 7、List 屬性; 8、Positioning 屬性; 、Printi

Style 對(duì)象

Style 對(duì)象代表一個(gè)單獨(dú)的樣式聲明。可從應(yīng)用樣式的文檔或元素訪問(wèn) Style 對(duì)象。

使用 Style 對(duì)象屬性的語(yǔ)法：

document.getElementById("id").style.property="值"

Style 對(duì)象的屬性：

背景
邊框和邊距
布局
列表
雜項(xiàng)
定位
打印
滾動(dòng)條
表格
文本
規(guī)范

IE:Internet Explorer, M:僅適用于 Mac IE, W:僅適用于 Windows IE, F:Firefox, O:Opera

W3C:萬(wàn)維網(wǎng)聯(lián)盟 World Wide Web Consortium (Internet 標(biāo)準(zhǔn)).

Background 屬性

屬性	描述	IE	F	O	W3C
background	在一行中設(shè)置所有的背景屬性	4	1	9	Yes
backgroundAttachment	設(shè)置背景圖像是否固定或隨頁(yè)面滾動(dòng)	4	1	9	Yes
backgroundColor	設(shè)置元素的背景顏色	4	1	9	Yes
backgroundImage	設(shè)置元素的背景圖像	4	1	9	Yes
backgroundPosition	設(shè)置背景圖像的起始位置	4	No	No	Yes
backgroundPositionX	設(shè)置backgroundPosition屬性的X坐標(biāo)	4	No	No	No
backgroundPositionY	設(shè)置backgroundPosition屬性的Y坐標(biāo)	4	No	No	No
backgroundRepeat	設(shè)置是否及如何重復(fù)背景圖像	4	1	9	Yes

Border 和 Margin 屬性

屬性	描述	IE	F	O	W3C
border	在一行設(shè)置四個(gè)邊框的所有屬性	4	1	9	Yes
borderBottom	在一行設(shè)置底邊框的所有屬性	4	1	9	Yes
borderBottomColor	設(shè)置底邊框的顏色	4	1	9	Yes
borderBottomStyle	設(shè)置底邊框的樣式	4	1	9	Yes
borderBottomWidth	設(shè)置底邊框的寬度	4	1	9	Yes
borderColor	設(shè)置所有四個(gè)邊框的顏色 (可設(shè)置四種顏色)	4	1	9	Yes
borderLeft	在一行設(shè)置左邊框的所有屬性	4	1	9	Yes
borderLeftColor	設(shè)置左邊框的顏色	4	1	9	Yes
borderLeftStyle	設(shè)置左邊框的樣式	4	1	9	Yes
borderLeftWidth	設(shè)置左邊框的寬度	4	1	9	Yes
borderRight	在一行設(shè)置右邊框的所有屬性	4	1	9	Yes
borderRightColor	設(shè)置右邊框的顏色	4	1	9	Yes
borderRightStyle	設(shè)置右邊框的樣式	4	1	9	Yes
borderRightWidth	設(shè)置右邊框的寬度	4	1	9	Yes
borderStyle	設(shè)置所有四個(gè)邊框的樣式 (可設(shè)置四種樣式)	4	1	9	Yes
borderTop	在一行設(shè)置頂邊框的所有屬性	4	1	9	Yes
borderTopColor	設(shè)置頂邊框的顏色	4	1	9	Yes
borderTopStyle	設(shè)置頂邊框的樣式	4	1	9	Yes
borderTopWidth	設(shè)置頂邊框的寬度	4	1	9	Yes
borderWidth	設(shè)置所有四條邊框的寬度 (可設(shè)置四種寬度)	4	1	9	Yes
margin	設(shè)置元素的邊距 (可設(shè)置四個(gè)值)	4	1	9	Yes
marginBottom	設(shè)置元素的底邊距	4	1	9	Yes
marginLeft	設(shè)置元素的左邊距	4	1	9	Yes
marginRight	設(shè)置元素的右邊據(jù)	4	1	9	Yes
marginTop	設(shè)置元素的頂邊距	4	1	9	Yes
outline	在一行設(shè)置所有的outline屬性	5M	1	9	Yes
outlineColor	設(shè)置圍繞元素的輪廓顏色	5M	1	9	Yes
outlineStyle	設(shè)置圍繞元素的輪廓樣式	5M	1	9	Yes
outlineWidth	設(shè)置圍繞元素的輪廓寬度	5M	1	9	Yes
padding	設(shè)置元素的填充 (可設(shè)置四個(gè)值)	4	1	9	Yes
paddingBottom	設(shè)置元素的下填充	4	1	9	Yes
paddingLeft	設(shè)置元素的左填充	4	1	9	Yes
paddingRight	設(shè)置元素的右填充	4	1	9	Yes
paddingTop	設(shè)置元素的頂填充	4	1	9	Yes

Layout 屬性

屬性	描述	IE	F	O	W3C
clear	設(shè)置在元素的哪邊不允許其他的浮動(dòng)元素	4	1	9	Yes
clip	設(shè)置元素的形狀	4	1	9	Yes
content	設(shè)置元信息	5M	1		Yes
counterIncrement	設(shè)置其后是正數(shù)的計(jì)數(shù)器名稱的列表。其中整數(shù)指示每當(dāng)元素出現(xiàn)時(shí)計(jì)數(shù)器的增量。默認(rèn)是1。	5M	1		Yes
counterReset	設(shè)置其后是正數(shù)的計(jì)數(shù)器名稱的列表。其中整數(shù)指示每當(dāng)元素出現(xiàn)時(shí)計(jì)數(shù)器被設(shè)置的值。默認(rèn)是0。	5M	1		Yes
cssFloat	設(shè)置圖像或文本將出現(xiàn)（浮動(dòng)）在另一元素中的何處。	5M	1	9	Yes
cursor	設(shè)置顯示的指針類(lèi)型	4	1	9	Yes
direction	設(shè)置元素的文本方向	5	1	9	Yes
display	設(shè)置元素如何被顯示	4	1	9	Yes
height	設(shè)置元素的高度	4	1	9	Yes
markerOffset	設(shè)置marker box的principal box距離其最近的邊框邊緣的距離	5M	1		Yes
marks	設(shè)置是否cross marks或crop marks應(yīng)僅僅被呈現(xiàn)于page box邊緣之外	5M	1		Yes
maxHeight	設(shè)置元素的最大高度	5M	1	9	Yes
maxWidth	設(shè)置元素的最大寬度	5M	1	9	Yes
minHeight	設(shè)置元素的最小高度	5M	1	9	Yes
minWidth	設(shè)置元素的最小寬度	5M	1	9	Yes
overflow	規(guī)定如何處理不適合元素盒的內(nèi)容	4	1	9	Yes
verticalAlign	設(shè)置對(duì)元素中的內(nèi)容進(jìn)行垂直排列	4	1	No	Yes
visibility	設(shè)置元素是否可見(jiàn)	4	1	9	Yes
width	設(shè)置元素的寬度	4	1	9	Yes

List 屬性

屬性	描述	IE	F	O	W3C
listStyle	在一行設(shè)置列表的所有屬性	4	1	9	Yes
listStyleImage	把圖像設(shè)置為列表項(xiàng)標(biāo)記	4	1	No	Yes
listStylePosition	改變列表項(xiàng)標(biāo)記的位置	4	1	9	Yes
listStyleType	設(shè)置列表項(xiàng)標(biāo)記的類(lèi)型	4	1	9	Yes

Positioning 屬性

屬性	描述	IE	F	O	W3C
bottom	設(shè)置元素的底邊緣距離父元素底邊緣的之上或之下的距離	5	1	9	Yes
left	置元素的左邊緣距離父元素左邊緣的左邊或右邊的距離	4	1	9	Yes
position	把元素放置在static, relative, absolute 或 fixed 的位置	4	1	9	Yes
right	置元素的右邊緣距離父元素右邊緣的左邊或右邊的距離	5	1	9	Yes
top	設(shè)置元素的頂邊緣距離父元素頂邊緣的之上或之下的距離	4	1	9	Yes
zIndex	設(shè)置元素的堆疊次序	4	1	9	Yes

Printing 屬性

屬性	描述	IE	F	O	W3C
orphans	設(shè)置段落留到頁(yè)面底部的最小行數(shù)	5M	1	9	Yes
page	設(shè)置顯示某元素時(shí)使用的頁(yè)面類(lèi)型	5M	1	9	Yes
pageBreakAfter	設(shè)置某元素之后的分頁(yè)行為	4	1	9	Yes
pageBreakBefore	設(shè)置某元素之前的分頁(yè)行為	4	1	9	Yes
pageBreakInside	設(shè)置某元素內(nèi)部的分頁(yè)行為	5M	1	9	Yes
size	設(shè)置頁(yè)面的方向和尺寸		1	9	Yes
widows	設(shè)置段落必須留到頁(yè)面頂部的最小行數(shù)	5M	1	9	Yes

Scrollbar 屬性 (IE-only)

屬性	描述	IE	F	O	W3C
scrollbar3dLightColor	設(shè)置箭頭和滾動(dòng)條左側(cè)和頂邊的顏色	5W	No	No	No
scrollbarArrowColor	設(shè)置滾動(dòng)條上的箭頭顏色	5W	No	No	No
scrollbarBaseColor	設(shè)置滾動(dòng)條的底色	5W	No	No	No
scrollbarDarkShadowColor	設(shè)置箭頭和滾動(dòng)條右側(cè)和底邊的顏色	5W	No	No	No
scrollbarFaceColor	設(shè)置滾動(dòng)條的表色	5W	No	No	No
scrollbarHighlightColor	設(shè)置箭頭和滾動(dòng)條左側(cè)和頂邊的顏色，以及滾動(dòng)條的背景	5W	No	No	No
scrollbarShadowColor	設(shè)置箭頭和滾動(dòng)條右側(cè)和底邊的顏色	5W	No	No	No
scrollbarTrackColor	設(shè)置滾動(dòng)條的背景色	5W	No	No	No

Table 屬性

屬性	描述	IE	F	O	W3C
borderCollapse	設(shè)置表格邊框是否合并為單邊框，或者像在標(biāo)準(zhǔn)的HTML中那樣分離。	5	1	9	Yes
borderSpacing	設(shè)置分隔單元格邊框的距離	5M	1	9	Yes
captionSide	設(shè)置表格標(biāo)題的位置	5M	No	No	Yes
emptyCells	設(shè)置是否顯示表格中的空單元格	5M	1	9	Yes
tableLayout	設(shè)置用來(lái)顯示表格單元格、行以及列的算法	5	No	No	Yes

Text 屬性

屬性	描述	IE	F	O	W3C
color	設(shè)置文本的顏色	4	1	9	Yes
font	在一行設(shè)置所有的字體屬性	4	1	9	Yes
fontFamily	設(shè)置元素的字體系列。	4	1	9	Yes
fontSize	設(shè)置元素的字體大小。	4	1	9	Yes
fontSizeAdjust	設(shè)置/調(diào)整文本的尺寸	5M	1	No	Yes
fontStretch	設(shè)置如何緊縮或伸展字體	5M	No	No	Yes
fontStyle	設(shè)置元素的字體樣式	4	1	9	Yes
fontVariant	用小型大寫(xiě)字母字體來(lái)顯示文本	4	1	9	Yes
fontWeight	設(shè)置字體的粗細(xì)	4	1	9	Yes
letterSpacing	設(shè)置字符間距	4	1	9	Yes
lineHeight	設(shè)置行間距	4	1	9	Yes
quotes	設(shè)置在文本中使用哪種引號(hào)	5M	1		Yes
textAlign	排列文本	4	1	9	Yes
textDecoration	設(shè)置文本的修飾	4	1	9	Yes
textIndent	縮緊首行的文本	4	1	9	Yes
textShadow	設(shè)置文本的陰影效果	5M	1		Yes
textTransform	對(duì)文本設(shè)置大寫(xiě)效果	4	1	9	Yes
unicodeBidi		5	1		Yes
whiteSpace	設(shè)置如何設(shè)置文本中的折行和空白符	4	1	9	Yes
wordSpacing	設(shè)置文本中的詞間距	6	1	9	Yes

標(biāo)準(zhǔn)屬性

屬性	描述	IE	F	O	W3C
dir	設(shè)置或返回文本的方向	5	1	9	Yes
lang	設(shè)置或返回元素的語(yǔ)言代碼	5	1	9	Yes
title	設(shè)置或返回元素的咨詢性的標(biāo)題	5	1	9	Yes

cssText 屬性

它是一組樣式屬性及其值的文本表示。這個(gè)文本格式化為一個(gè) CSS 樣式表，去掉了包圍屬性和值的元素選擇器的花括號(hào)。

將這一屬性設(shè)置為非法的值將會(huì)拋出一個(gè)代碼為 SYNTAX_ERR 的 DOMException 異常。當(dāng) CSS2Properties 對(duì)象是只讀的時(shí)候，試圖設(shè)置這一屬性將會(huì)拋出一個(gè)代碼為 NO_MODIFICATION_ALLOWED_ERR 的 DOMException 異常。

關(guān)于 CSS2Properties 對(duì)象

CSS2Properties 對(duì)象表示一組 CSS 樣式屬性及其值。它為 CSS 規(guī)范定義的每一個(gè) CSS 屬性都定義一個(gè) JavaScript 屬性。

一個(gè) HTMLElement 的 style 屬性是一個(gè)可讀可寫(xiě)的 CSS2Properties 對(duì)象，就好像 CSSRule 對(duì)象的 style 屬性一樣。不過(guò)，Window.getComputedStyle() 的返回值是一個(gè) CSS2Properties 對(duì)象，其屬性是只讀的。