HTML DOM Style 對象
Style 對象
Style 對象代表一個單獨的樣式聲明。可從應用樣式的文檔或元素訪問Style 對象。
使用Style 對象屬性的語法:
document.getElementById("id").style.property="值"
Style 對象的屬性:
IE: Internet Explorer, M: 僅適用於Mac IE, W: 僅適用於Windows IE, F: Firefox, O: Opera
W3C: 萬維網聯盟 World Wide Web Consortium (Internet 標準).
Background 屬性
屬性 | 描述 | IE | F | O | W3C |
---|---|---|---|---|---|
background | 在一行中設置所有的背景屬性 | 4 | 1 | 9 | Yes |
backgroundAttachment | 設置背景圖像是否固定或隨頁面滾動 | 4 | 1 | 9 | Yes |
backgroundColor | 設置元素的背景顏色 | 4 | 1 | 9 | Yes |
backgroundImage | 設置元素的背景圖像 | 4 | 1 | 9 | Yes |
backgroundPosition | 設置背景圖像的起始位置 | 4 | No | No | Yes |
backgroundPositionX | 設置backgroundPosition屬性的X座標 | 4 | No | No | No |
backgroundPositionY | 設置backgroundPosition屬性的Y座標 | 4 | No | No | No |
backgroundRepeat | 設置是否及如何重複背景圖像 | 4 | 1 | 9 | Yes |
Border and Margin 屬性
屬性 | 描述 | IE | F | O | W3C |
---|---|---|---|---|---|
border | 在一行設置四個邊框的所有屬性 | 4 | 1 | 9 | Yes |
borderBottom | 在一行設置底邊框的所有屬性 | 4 | 1 | 9 | Yes |
borderBottomColor | 設置底邊框的顏色 | 4 | 1 | 9 | Yes |
borderBottomStyle | 設置底邊框的樣式 | 4 | 1 | 9 | Yes |
borderBottomWidth | 設置底邊框的寬度 | 4 | 1 | 9 | Yes |
borderColor | 設置所有四個邊框的顏色 (可設置四種顏色) | 4 | 1 | 9 | Yes |
borderLeft | 在一行設置左邊框的所有屬性 | 4 | 1 | 9 | Yes |
borderLeftColor | 設置左邊框的顏色 | 4 | 1 | 9 | Yes |
borderLeftStyle | 設置左邊框的樣式 | 4 | 1 | 9 | Yes |
borderLeftWidth | 設置左邊框的寬度 | 4 | 1 | 9 | Yes |
borderRight | 在一行設置右邊框的所有屬性 | 4 | 1 | 9 | Yes |
borderRightColor | 設置右邊框的顏色 | 4 | 1 | 9 | Yes |
borderRightStyle | 設置右邊框的樣式 | 4 | 1 | 9 | Yes |
borderRightWidth | 設置右邊框的寬度 | 4 | 1 | 9 | Yes |
borderStyle | 設置所有四個邊框的樣式 (可設置四種樣式) | 4 | 1 | 9 | Yes |
borderTop | 在一行設置頂邊框的所有屬性 | 4 | 1 | 9 | Yes |
borderTopColor | 設置頂邊框的顏色 | 4 | 1 | 9 | Yes |
borderTopStyle | 設置頂邊框的樣式 | 4 | 1 | 9 | Yes |
borderTopWidth | 設置頂邊框的寬度 | 4 | 1 | 9 | Yes |
borderWidth | 設置所有四條邊框的寬度 (可設置四種寬度) | 4 | 1 | 9 | Yes |
margin | 設置元素的邊距 (可設置四個值) | 4 | 1 | 9 | Yes |
marginBottom | 設置元素的底邊距 | 4 | 1 | 9 | Yes |
marginLeft | 設置元素的左邊距 | 4 | 1 | 9 | Yes |
marginRight | 設置元素的右邊據 | 4 | 1 | 9 | Yes |
marginTop | 設置元素的頂邊距 | 4 | 1 | 9 | Yes |
outline | 在一行設置所有的outline屬性 | 5M | 1 | 9 | Yes |
outlineColor | 設置圍繞元素的輪廓顏色 | 5M | 1 | 9 | Yes |
outlineStyle | 設置圍繞元素的輪廓樣式 | 5M | 1 | 9 | Yes |
outlineWidth | 設置圍繞元素的輪廓寬度 | 5M | 1 | 9 | Yes |
padding | 設置元素的填充 (可設置四個值) | 4 | 1 | 9 | Yes |
paddingBottom | 設置元素的下填充 | 4 | 1 | 9 | Yes |
paddingLeft | 設置元素的左填充 | 4 | 1 | 9 | Yes |
paddingRight | 設置元素的右填充 | 4 | 1 | 9 | Yes |
paddingTop | 設置元素的頂填充 | 4 | 1 | 9 | Yes |
Layout 屬性
屬性 | 描述 | IE | F | O | W3C |
---|---|---|---|---|---|
clear | 設置在元素的哪邊不允許其他的浮動元素 | 4 | 1 | 9 | Yes |
clip | 設置元素的形狀 | 4 | 1 | 9 | Yes |
content | 設置元信息 | 5M | 1 | Yes | |
counterIncrement | 設置其後是正數的計數器名稱的列表。其中整數指示每當元素出現時計數器的增量。默認是1。 | 5M | 1 | Yes | |
counterReset | 設置其後是正數的計數器名稱的列表。其中整數指示每當元素出現時計數器被設置的值。默認是0。 | 5M | 1 | Yes | |
cssFloat | 設置圖像或文本將出現(浮動)在另一元素中的何處。 | 5M | 1 | 9 | Yes |
cursor | 設置顯示的指針類型 | 4 | 1 | 9 | Yes |
direction | 設置元素的文本方向 | 5 | 1 | 9 | Yes |
display | 設置元素如何被顯示 | 4 | 1 | 9 | Yes |
height | 設置元素的高度 | 4 | 1 | 9 | Yes |
markerOffset | 設置marker box的principal box距離其最近的邊框邊緣的距離 | 5M | 1 | Yes | |
marks | 設置是否cross marks或crop marks應僅僅被呈現於page box邊緣之外 | 5M | 1 | Yes | |
maxHeight | 設置元素的最大高度 | 5M | 1 | 9 | Yes |
maxWidth | 設置元素的最大寬度 | 5M | 1 | 9 | Yes |
minHeight | 設置元素的最小高度 | 5M | 1 | 9 | Yes |
minWidth | 設置元素的最小寬度 | 5M | 1 | 9 | Yes |
overflow | 規定如何處理不適合元素盒的內容 | 4 | 1 | 9 | Yes |
verticalAlign | 設置對元素中的內容進行垂直排列 | 4 | 1 | No | Yes |
visibility | 設置元素是否可見 | 4 | 1 | 9 | Yes |
width | 設置元素的寬度 | 4 | 1 | 9 | Yes |
List 屬性
屬性 | 描述 | IE | F | O | W3C |
---|---|---|---|---|---|
listStyle | 在一行設置列表的所有屬性 | 4 | 1 | 9 | Yes |
listStyleImage | 把圖像設置爲列表項標記 | 4 | 1 | No | Yes |
listStylePosition | 改變列表項標記的位置 | 4 | 1 | 9 | Yes |
listStyleType | 設置列表項標記的類型 | 4 | 1 | 9 | Yes |
Misc 屬性
屬性 | 描述 | IE | F | O | W3C |
---|---|---|---|---|---|
cssText | 4 | 1 |
Positioning 屬性
屬性 | 描述 | IE | F | O | W3C |
---|---|---|---|---|---|
bottom | 設置元素的底邊緣距離父元素底邊緣的之上或之下的距離 | 5 | 1 | 9 | Yes |
left | 置元素的左邊緣距離父元素左邊緣的左邊或右邊的距離 | 4 | 1 | 9 | Yes |
position | 把元素放置在static, relative, absolute 或 fixed 的位置 | 4 | 1 | 9 | Yes |
right | 置元素的右邊緣距離父元素右邊緣的左邊或右邊的距離 | 5 | 1 | 9 | Yes |
top | 設置元素的頂邊緣距離父元素頂邊緣的之上或之下的距離 | 4 | 1 | 9 | Yes |
zIndex | 設置元素的堆疊次序 | 4 | 1 | 9 | Yes |
Printing 屬性
屬性 | 描述 | IE | F | O | W3C |
---|---|---|---|---|---|
orphans | 設置段落留到頁面底部的最小行數 | 5M | 1 | 9 | Yes |
page | 設置顯示某元素時使用的頁面類型 | 5M | 1 | 9 | Yes |
pageBreakAfter | 設置某元素之後的分頁行爲 | 4 | 1 | 9 | Yes |
pageBreakBefore | 設置某元素之前的分頁行爲 | 4 | 1 | 9 | Yes |
pageBreakInside | 設置某元素內部的分頁行爲 | 5M | 1 | 9 | Yes |
size | 設置頁面的方向和尺寸 | 1 | 9 | Yes | |
widows | 設置段落必須留到頁面頂部的最小行數 | 5M | 1 | 9 | Yes |
Scrollbar 屬性 (IE-only)
屬性 | 描述 | IE | F | O | W3C |
---|---|---|---|---|---|
scrollbar3dLightColor | 設置箭頭和滾動條左側和頂邊的顏色 | 5W | No | No | No |
scrollbarArrowColor | 設置滾動條上的箭頭顏色 | 5W | No | No | No |
scrollbarBaseColor | 設置滾動條的底色 | 5W | No | No | No |
scrollbarDarkShadowColor | 設置箭頭和滾動條右側和底邊的顏色 | 5W | No | No | No |
scrollbarFaceColor | 設置滾動條的表色 | 5W | No | No | No |
scrollbarHighlightColor | 設置箭頭和滾動條左側和頂邊的顏色,以及滾動條的背景 | 5W | No | No | No |
scrollbarShadowColor | 設置箭頭和滾動條右側和底邊的顏色 | 5W | No | No | No |
scrollbarTrackColor | 設置滾動條的背景色 | 5W | No | No | No |
Table 屬性
屬性 | 描述 | IE | F | O | W3C |
---|---|---|---|---|---|
borderCollapse | 設置表格邊框是否合併爲單邊框,或者像在標準的HTML中那樣分離。 | 5 | 1 | 9 | Yes |
borderSpacing | 設置分隔單元格邊框的距離 | 5M | 1 | 9 | Yes |
captionSide | 設置表格標題的位置 | 5M | No | No | Yes |
emptyCells | 設置是否顯示錶格中的空單元格 | 5M | 1 | 9 | Yes |
tableLayout | 設置用來顯示錶格單元格、行以及列的算法 | 5 | No | No | Yes |
Text 屬性
屬性 | 描述 | IE | F | O | W3C |
---|---|---|---|---|---|
color | 設置文本的顏色 | 4 | 1 | 9 | Yes |
font | 在一行設置所有的字體屬性 | 4 | 1 | 9 | Yes |
fontFamily | 設置元素的字體系列。 | 4 | 1 | 9 | Yes |
fontSize | 設置元素的字體大小。 | 4 | 1 | 9 | Yes |
fontSizeAdjust | 設置/調整文本的尺寸 | 5M | 1 | No | Yes |
fontStretch | 設置如何緊縮或伸展字體 | 5M | No | No | Yes |
fontStyle | 設置元素的字體樣式 | 4 | 1 | 9 | Yes |
fontVariant | 用小型大寫字母字體來顯示文本 | 4 | 1 | 9 | Yes |
fontWeight | 設置字體的粗細 | 4 | 1 | 9 | Yes |
letterSpacing | 設置字符間距 | 4 | 1 | 9 | Yes |
lineHeight | 設置行間距 | 4 | 1 | 9 | Yes |
quotes | 設置在文本中使用哪種引號 | 5M | 1 | Yes | |
textAlign | 排列文本 | 4 | 1 | 9 | Yes |
textDecoration | 設置文本的修飾 | 4 | 1 | 9 | Yes |
textIndent | 縮緊首行的文本 | 4 | 1 | 9 | Yes |
textShadow | 設置文本的陰影效果 | 5M | 1 | Yes | |
textTransform | 對文本設置大寫效果 | 4 | 1 | 9 | Yes |
unicodeBidi | 5 | 1 | Yes | ||
whiteSpace | 設置如何設置文本中的折行和空白符 | 4 | 1 | 9 | Yes |
wordSpacing | 設置文本中的詞間距 | 6 | 1 | 9 | Yes |
Standard 屬性
屬性 | 描述 | IE | F | O | W3C |
---|---|---|---|---|---|
dir | 設置或返回文本的方向 | 5 | 1 | 9 | Yes |
lang | 設置或返回元素的語言代碼 | 5 | 1 | 9 | Yes |
title | 設置或返回元素的諮詢性的標題 | 5 | 1 | 9 | Yes |