HTML DOM Style 對象
Style 對象
Style 對象代表一個(gè)單獨(dú)的樣式聲明�？蓮膽�(yīng)用樣式的文檔或元素訪問 Style 對象。
使用 Style 對象屬性的語法：
document.getElementById("id").style.property="值"
Style 對象的屬性：
IE: Internet Explorer, M: 僅適用于 Mac IE, W: 僅適用于 Windows IE, F: Firefox, O: Opera
W3C: 萬維網(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è)置背景圖像是否固定或隨頁面滾動(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è)置顯示的指針類型 | 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è)置對元素中的內(nèi)容進(jìn)行垂直排列 | 4 | 1 | No | Yes |
| visibility | 設(shè)置元素是否可見 | 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)記的類型 | 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è)置段落留到頁面底部的最小行數(shù) | 5M | 1 | 9 | Yes |
| page | 設(shè)置顯示某元素時(shí)使用的頁面類型 | 5M | 1 | 9 | Yes |
| pageBreakAfter | 設(shè)置某元素之后的分頁行為 | 4 | 1 | 9 | Yes |
| pageBreakBefore | 設(shè)置某元素之前的分頁行為 | 4 | 1 | 9 | Yes |
| pageBreakInside | 設(shè)置某元素內(nèi)部的分頁行為 | 5M | 1 | 9 | Yes |
| size | 設(shè)置頁面的方向和尺寸 | 1 | 9 | Yes | |
| widows | 設(shè)置段落必須留到頁面頂部的最小行數(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è)置用來顯示表格單元格、行以及列的算法 | 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 | 用小型大寫字母字體來顯示文本 | 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è)置在文本中使用哪種引號 | 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 | 對文本設(shè)置大寫效果 | 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è)置或返回元素的語言代碼 | 5 | 1 | 9 | Yes |
| title | 設(shè)置或返回元素的咨詢性的標(biāo)題 | 5 | 1 | 9 | Yes |
cssText 屬性
它是一組樣式屬性及其值的文本表示。這個(gè)文本格式化為一個(gè) CSS 樣式表，去掉了包圍屬性和值的元素選擇器的花括號。
將這一屬性設(shè)置為非法的值將會拋出一個(gè)代碼為 SYNTAX_ERR 的 DOMException 異常。當(dāng) CSS2Properties 對象是只讀的時(shí)候，試圖設(shè)置這一屬性將會拋出一個(gè)代碼為 NO_MODIFICATION_ALLOWED_ERR 的 DOMException 異常。
關(guān)于 CSS2Properties 對象
CSS2Properties 對象表示一組 CSS 樣式屬性及其值。它為 CSS 規(guī)范定義的每一個(gè) CSS 屬性都定義一個(gè) JavaScript 屬性。
一個(gè) HTMLElement 的 style 屬性是一個(gè)可讀可寫的 CSS2Properties 對象，就好像 CSSRule 對象的 style 屬性一樣。不過，Window.getComputedStyle() 的返回值是一個(gè) CSS2Properties 對象，其屬性是只讀的。