HTML DOM Style 對象

Style 對象

Style 對象表示一個個別的樣式聲明。

訪問 Style 對象

Style 對象可以從文檔的頭部區域訪問，或者從指定的 HTML 元素訪問。

從文檔的頭部區域訪問 style 對象：

var x = document.getElementsByTagName("STYLE");

訪問一個指定元素的 style 對象：

var x = document.getElementById("myH1").style;

創建 Style 對象

您可以使用 document.createElement() 方法來創建 <style> 元素：

var x = document.createElement("STYLE");

您也可以設置一個已有元素的 style 屬性：

document.getElementById("myH1").style.color = "red";

Style 對象屬性

"CSS" 列表示該屬性是在哪一個 CSS 版本中定義的（CSS1、CSS2 或 CSS3）。

屬性 描述 CSS
alignContent 設置或返回當靈活容器內的各項沒有佔用所有可用的空間時各項之間的對齊方式（水準）。 3
alignItems 設置或返回靈活容器內的各項的對齊方式。 3
alignSelf 設置或返回靈活容器內被選中專案的對齊方式。 3
animation 是下麵除了 animationPlayState 屬性之外的其他屬性的速記屬性。 3
animationDelay 設置或返回動畫何時開始。 3
animationDirection 設置或返回是否迴圈交替反向播放動畫。 3
animationDuration 設置或返回動畫完成需花費的秒數或毫秒數。 3
animationFillMode 設置或返回當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。 3
animationIterationCount 設置或返回動畫的播放次數。 3
animationName 設置或返回關鍵幀 @keyframes 動畫的名稱。 3
animationTimingFunction 設置或返回動畫的速度曲線。 3
animationPlayState 設置或返回動畫是運行的還是暫停的。 3
background 設置或返回在一個聲明中的所有背景屬性。 1
backgroundAttachment 設置或返回背景圖像是否固定或隨頁面滾動。 1
backgroundColor 設置或返回元素的背景色。 1
backgroundImage 設置或返回元素的背景圖像。 1
backgroundPosition 設置或返回的背景圖像的起始位置。 1
backgroundRepeat 設置或返回如何重複背景圖像。 1
backgroundClip 設置或返回背景的繪製區域。 3
backgroundOrigin 設置或返回背景圖像的定位區域。 3
backgroundSize 設置或返回背景圖像的大小。 3
backfaceVisibility 設置或返回當一個元素背對螢幕時是否可見。 3
border 設置或返回在一個聲明中的 borderWidth、borderStyle 和 borderColor。 1
borderBottom 設置或返回在一個聲明中的所有 borderBottom* 屬性。 1
borderBottomColor 設置或返回下邊框的顏色。 1 
borderBottomLeftRadius 設置或返回左下角邊框的形狀。 3
borderBottomRightRadius 設置或返回右下角邊框的形狀。 3
borderBottomStyle 設置或返回下邊框的樣式。 1
borderBottomWidth 設置或返回下邊框的寬度。 1
borderCollapse 設置或返回表格的邊框是否被折疊為一個單一的邊框。 2
borderColor 設置或返回元素邊框的顏色（最多可以有四個值）。 1
borderImage 一個用於設置或返回所有的 borderImage* 屬性的速記屬性。 3
borderImageOutset 設置或返回邊框圖像區域超出邊界框的量。 3
borderImageRepeat 設置或返回圖像邊框是重複拼接圖塊還是延伸圖塊。 3
borderImageSlice 設置或返回圖像邊框的向內偏移。 3
borderImageSource 設置或返回要作為邊框使用的圖像。 3
borderImageWidth 設置或返回圖像邊框的寬度。 3
borderLeft 設置或返回在一個聲明中的所有 borderLeft* 屬性。 1
borderLeftColor 設置或返回左邊框的顏色。 1
borderLeftStyle 設置或返回左邊框的樣式。 1
borderLeftWidth 設置或返回左邊框的寬度。 1
borderRadius 一個用於設置或返回四個 border*Radius 屬性的速記屬性。 3
borderRight 設置或返回在一個聲明中的所有 borderRight* 屬性。 1
borderRightColor 設置或返回右邊框的顏色。 1
borderRightStyle 設置或返回右邊框的樣式。 1
borderRightWidth 設置或返回右邊框的寬度。 1
borderSpacing 設置或返回表格中單元格之間的距離。 2
borderStyle 設置或返回元素邊框的樣式（最多可以有四個值）。 1
borderTop 設置或返回在一個聲明中的所有 borderTop* 屬性。 1
borderTopColor 設置或返回上邊框的顏色。 1
borderTopLeftRadius 設置或返回左上角邊框的形狀。 3
borderTopRightRadius 設置或返回右上角邊框的形狀。 3
borderTopStyle 設置或返回上邊框的樣式。 1
borderTopWidth 設置或返回上邊框的寬度。 1
borderWidth 設置或返回元素邊框的寬度（最多可以有四個值）。 1
bottom 設置或返回定位元素的底部位置。 2
boxDecorationBreak 設置或返回分頁處元素的背景和邊框行為，或者換行處內聯元素的背景和邊框行為。 3
boxShadow 設置或返回元素的下拉陰影。 3
boxSizing 允許您以特定的方式定義匹配某個區域的特定元素。 3
captionSide 設置或返回表格標題的位置。 2
clear 設置或返回元素相對浮動對象的位置。 1
clip 設置或返回定位元素的可見部分。 2
color 設置或返回文本的顏色。 1
columnCount 設置或返回元素應該被劃分的列數。 3
columnFill 設置或返回如何填充列。 3
columnGap 設置或返回列之間的間隔。 3
columnRule 一個用於設置或返回所有的 columnRule* 屬性的速記屬性。 3
columnRuleColor 設置或返回列之間的顏色規則。 3
columnRuleStyle 設置或返回列之間的樣式規則。 3
columnRuleWidth 設置或返回列之間的寬度規則。 3
columns 一個用於設置或返回 columnWidth 和 columnCount 的速記屬性。 3
columnSpan 設置或返回一個元素應橫跨多少列。 3
columnWidth 設置或返回列的寬度。 3
content 與 :before 和 :after 偽元素一起使用，來插入生成的內容。 2
counterIncrement 增加一個或多個計數器。 2
counterReset 創建或重置一個或多個計數器。 2
cursor 設置或返回滑鼠指針顯示的游標類型。 2
direction 設置或返回文本的方向。 2
display 設置或返回元素的顯示類型。 1
emptyCells 設置或返回是否顯示表格中的空單元格的邊框和背景。 2
filter 設置或返回圖片濾鏡(可視效果，如：高斯模糊與飽和度) 3
flex 相對於同一容器其他靈活的專案，設置或返回專案的長度。 3
flexBasis 設置或靈活專案的初始長度。 3
flexDirection 設置或返回靈活專案的方向。 3
flexFlow 是 flexDirection 和 flexWrap 屬性的速記屬性。 3
flexGrow 設置或返回專案將相對於同一容器內其他靈活的專案進行擴展的量。 3
flexShrink 設置或返回專案將相對於同一容器內其他靈活的專案進行收縮的量。 3
flexWrap 設置或返回靈活專案是否拆行或拆列。 3
cssFloat 設置或返回元素的水準對齊方式。 1
font 設置或返回一個聲明中的 fontStyle、fontVariant、fontWeight、fontSize、lineHeight 和 fontFamily。 1
fontFamily 設置或返回文本的字體。 1
fontSize 設置或返回文本的字體尺寸。 1
fontStyle 設置或返回字體樣式是否是 normal（正常的）、italic（斜體）或 oblique（傾斜的）。 1
fontVariant 設置或返回是否以小型大寫字母顯示字體。 1
fontWeight 設置或返回字體的粗細。 1
fontSizeAdjust 當使用備用字體時，確保文本的可讀性。 3
fontStretch 從字體庫中選擇一種正常的、濃縮的或擴大的字體。 3
hangingPunctuation 規定一個標點符號是否可以放置線上框外。 3
height 設置或返回元素的高度。 1
hyphens 設置如何拆分單詞來提高段落佈局。 3
icon 向作者提供為一個帶有等價於圖示的元素定義樣式的功能。 3
imageOrientation 規定一個用戶代理應用到圖像上的順時針方向的旋轉。 3
justifyContent 設置或返回當靈活容器內的各項沒有佔用所有可用的空間時各項之間的對齊方式（垂直）。 3
left 設置或返回定位元素的左部位置。 2
letterSpacing 設置或返回文本中字元之間的空間。 1
lineHeight 設置或返回在文本中行之間的距離。 1
listStyle 設置或返回一個聲明中的 listStyleImage、listStylePosition 和 listStyleType。 1
listStyleImage 設置或返回作為列表項標記的圖像。 1
listStylePosition 設置或返回列表項標記的位置。 1
listStyleType 設置或返回列表項標記的類型。 1
margin 設置或返回元素的外邊距（最多可以有四個值）。 1
marginBottom 設置或返回元素的的下外邊距。 1
marginLeft 設置或返回元素的左外邊距。 1
marginRight 設置或返回元素的右外邊距。 1
marginTop 設置或返回元素的上外邊距。 1
maxHeight 設置或返回元素的最大高度。 2
maxWidth 設置或返回元素的最大寬度。 2
minHeight 設置或返回元素的最小高度。 2
minWidth 設置或返回元素的最小寬度。 2
navDown 設置或返回當使用向下箭頭導航鍵時要導航到哪里。 3
navIndex 設置或返回元素的顯示順序。 3
navLeft 設置或返回當使用向左箭頭導航鍵時要導航到哪里。 3
navRight 設置或返回當使用向右箭頭導航鍵時要導航到哪里。 3
navUp 設置或返回當使用向上箭頭導航鍵時要導航到哪里。 3
opacity 設置或返回元素的不透明度。 3
order 設置或返回一個靈活的專案相對於同一容器內其他靈活專案的順序。 3
orphans 設置或返回當元素內有分頁時，必須在頁面底部預留的最小行數。 2
outline 設置或返回在一個聲明中的所有 outline 屬性。 2
outlineColor 設置或返回一個元素周圍的輪廓顏色。 2
outlineOffset 對輪廓進行偏移，並在邊框邊緣進行繪製。 3
outlineStyle 設置或返回一個元素周圍的輪廓樣式。 2
outlineWidth 設置或返回一個元素周圍的輪廓寬度。 2
overflow 設置或返回如何處理呈現在元素框外面的內容。 2
overflowX 規定如果內容溢出元素的內容區域，是否對內容的左/右邊緣進行裁剪。 3
overflowY 規定如果內容溢出元素的內容區域，是否對內容的上/下邊緣進行裁剪。 3
padding 設置或返回元素的內邊距（最多可以有四個值）。 1
paddingBottom 設置或返回元素的下內邊距。 1
paddingLeft 設置或返回元素的左內邊距。 1
paddingRight 設置或返回元素的右內邊距。 1
paddingTop 設置或返回元素的上內邊距。 1
pageBreakAfter 設置或返回元素後的分頁行為。 2
pageBreakBefore 設置或返回元素前的分頁行為。 2
pageBreakInside 設置或返回元素內的分頁行為。 2
perspective 設置或返回 3D 元素被查看的視角。 3
perspectiveOrigin 設置或返回 3D 元素的底部位置。 3
position 設置或返回用於元素定位方法的類型（static、relative、absolute 或 fixed）。 2
quotes 設置或返回嵌入引用的引號類型。 2
resize 設置或返回是否可由用戶調整元素的尺寸大小。 3
right 設置或返回定位元素的右部位置。 2
tableLayout 設置或返回表格單元格、行、列的佈局方式。 2
tabSize 設置或返回跳位字元（tab）字元的長度。 3
textAlign 設置或返回文本的水準對齊方式。 1
textAlignLast 設置或返回當 text-align 屬性設置為 "justify" 時，如何對齊一個強制換行符前的最後一行。 3
textDecoration 設置或返回文本的修飾。 1
textDecorationColor 設置或返回文本修飾的顏色。 3
textDecorationLine 設置或返回文本修飾要使用的線條類型。 3
textDecorationStyle 設置或返回文本修飾中的線條樣式。 3
textIndent 設置或返回文本第一行的縮進。 1
textJustify 設置或返回當 text-align 屬性設置為 "justify" 時，要使用的對齊方法。 3
textOverflow 設置或返回當文本溢出包含它的元素，應該發生什麼。 3
textShadow 設置或返回文本的陰影效果。 3
textTransform 設置或返回文本的大小寫。 1
top 設置或返回定位元素的頂部位置。 2
transform 向元素應用 2D 或 3D 轉換。 3
transformOrigin 設置或返回被轉換元素的位置。 3
transformStyle 設置或返回被嵌套的元素如何呈現在 3D 空間中。 3
transition 一個用於設置或返回四個過渡屬性的速記屬性。 3
transitionProperty 應用過渡效果的 CSS 屬性的名稱。 3
transitionDuration 設置或返回完成過渡效果需要花費的時間（以秒或毫秒計）。 3
transitionTimingFunction 設置或返回過渡效果的速度曲線。 3
transitionDelay 設置或返回過渡效果何時開始。 3
unicodeBidi 設置或返回文本是否被重寫，以便在同一文檔中支持多種語言。 2
verticalAlign 設置或返回元素中內容的垂直對齊方式。 1
visibility 設置或返回元素是否應該是可見的。 2
whiteSpace 設置或返回如何處理文本中的跳位字元、換行符和空白字元。 1
width 設置或返回元素的寬度。 1
wordBreak 設置或返回非 CJK 語言的換行規則。 3
wordSpacing 設置或返回文本中單詞之間的空間。 1
wordWrap 允許長單詞或 URL 地址換行到下一行。 3
widows 設置或返回一個元素必須在頁面頂部的可見行的最小數量。 2
zIndex 設置或返回定位元素的堆疊順序。 2