HTML DOM教程 41-HTML DOM Style 對象

文章目錄

• 　　2：使用Style 對象屬性的文法：
• 　　cssText 屬性

HTML DOM教程 41-HTML DOM Style 對象

 

　　1：Style 對象

　　Style 對象代表一個單獨的樣式聲明。可從應用樣式的文檔或元素訪問Style 對象。

　　2：使用Style 對象屬性的文法：

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

　　3：Style 對象的屬性：

　　背景,邊框和邊距 ,布局 ,列表 ,雜項 ,定位 ,列印 ,捲軸 ,表格 ,文本 ,規範.

　　下面將分別列出這些屬性。

　　3.1 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

　　3.2 Border 和 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

　　3.3 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

　　3.4 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

　　3.5 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

　　3.6 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

　　3.7 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

　　3.8 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

　　3.9 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

　　3.10 Standard 屬性

屬性	描述	IE	F	O	W3C
dir	設定或返迴文本的方向	5	1	9	Yes
lang	設定或返回元素的語言代碼	5	1	9	Yes
title	設定或返回元素的諮詢性的標題	5	1	9	Yes

　　3.11 其他屬性　　cssText 屬性

　　它是一組樣式屬性及其值的文本表示。這個文字格式設定化為一個 CSS 樣式表，去掉了包圍屬性和值的元素選取器的花括弧。將這一屬性設定為非法的值將會拋出一個代碼為 SYNTAX_ERR 的 DOMException 異常。當 CSS2Properties 對象是唯讀時候，試圖設定這一屬性將會拋出一個代碼為 NO_MODIFICATION_ALLOWED_ERR 的 DOMException 異常。

　　關於 CSS2Properties 對象

　　CSS2Properties 對象表示一組 CSS 樣式屬性及其值。它為 CSS 規範所定義的每一個 CSS 屬性都定義了 JavaScript 屬性。一個 HTMLElement 的 style 屬性是一個可讀可寫的 CSS2Properties 對象，就好像 CSSRule 對象的 style 屬性一樣。

不過，Window.getComputedStyle() 的傳回值是一個 CSS2Properties 對象，其屬性是唯讀。