HTML DOM Style 對象

Style 對象

Style 對象代表單獨的樣式聲明。

Style 對象屬性

屬性 描述
alignContent 設置或返回彈性容器內的行之間的對齊方式，當項目不使用所有可用空間時。
alignItems 設置或返回彈性容器內項目的對齊方式。
alignSelf 設置或返回彈性容器內選定項目的對齊方式。
animation 所有動畫屬性的簡寫屬性，animationPlayState 屬性除外。
animationDelay 設置或返回動畫何時開始。
animationDirection 設置或返回動畫是否應在交替循環中反向播放。
animationDuration 設置或返回動畫完成一個周期所需的秒數或毫秒數。
animationFillMode 設置或返回動畫在執行時間之外應用的值。
animationIterationCount 設置或返回動畫應播放的次數。
animationName 設置或返回 @keyframes 動畫的名稱。
animationPlayState 設置或返回動畫是正在運行還是暫停。
animationTimingFunction 設置或返回動畫的速度曲線。
background 在一條聲明中設置或返回所有背景屬性。
backgroundAttachment 設置或返回背景圖像是固定的還是隨頁面滾動。
backgroundClip 設置或返回背景的繪制區域。
backgroundColor 設置或返回元素的背景顏色。
backgroundImage 設置或返回元素的背景圖像。
backgroundOrigin 設置或返回背景圖像的定位區域。
backgroundPosition 設置或返回背景圖像的起始位置。
backgroundRepeat 設置或返回如何重復（平鋪）背景圖像。
backgroundSize 設置或返回背景圖像的大小。
backfaceVisibility 設置或返回元素在不面向屏幕時是否可見。
border 在一條聲明中設置或返回邊框寬度、邊框樣式和邊框顏色。
borderBottom 在一條聲明中設置或返回所有 borderBottom 屬性。
borderBottomColor 設置或返回下邊框的顏色。
borderBottomLeftRadius 設置或返回左下角邊框的形狀。
borderBottomRightRadius 設置或返回右下角邊框的形狀。
borderBottomStyle 設置或返回下邊框的樣式。
borderBottomWidth 設置或返回下邊框的寬度。
borderCollapse 設置或返回表格邊框是否應該折疊成單邊框。
borderColor 設置或返回元素邊框的顏色（最多可以設置四個值）。
borderImage 用于設置或返回所有 borderImage 屬性的簡寫屬性。
borderImageOutset 設置或返回邊框圖像區域超出邊框 box 的量。
borderImageRepeat 設置或返回圖像邊框是否應重復、環繞或拉伸。
borderImageSlice 設置或返回圖像邊框的向內偏移量。
borderImageSource 設置或返回用作邊框的圖像。
borderImageWidth 設置或返回圖像邊框的寬度。
borderLeft 在一條聲明中設置或返回所有 borderLeft 屬性。
borderLeftColor 設置或返回左邊框的顏色。
borderLeftStyle 設置或返回左邊框的樣式。
borderLeftWidth 設置或返回左邊框的寬度。
borderRadius 用于設置或返回所有四個 borderRadius 屬性的簡寫屬性。
borderRight 在一條聲明中設置或返回所有 borderRight 屬性。
borderRightColor 設置或返回右邊框的顏色。
borderRightStyle 設置或返回右邊框的樣式。
borderRightWidth 設置或返回右邊框的寬度。
borderSpacing 設置或返回表格中單元格之間的空間。
borderStyle 設置或返回元素邊框的樣式（最多可以設置四個值）。
borderTop 在一條聲明中設置或返回所有 borderTop 屬性。
borderTopColor 設置或返回上邊框的顏色。
borderTopLeftRadius 設置或返回左上角邊框的形狀。
borderTopRightRadius 設置或返回右上角邊框的形狀。
borderTopStyle 設置或返回上邊框的樣式。
borderTopWidth 設置或返回上邊框的寬度。
borderWidth 設置或返回元素邊框的寬度（最多可以設置四個值）。
bottom 設置或返回定位元素的底部位置。
boxDecorationBreak 設置或返回元素在分頁時的背景和邊框的行為，或者對于行內元素，在換行時的行為。
boxShadow 將一個或多個陰影附加到框（box）。
boxSizing 允許您定義某些元素以某種方式適合某個區域。
captionSide 設置或返回表格標題的位置。
caretColor 設置或返回元素的插入符號/光標的顏色。
clear 設置或返回元素相對于浮動對象的位置。
clip 設置或返回定位元素的哪一部分可見。
color 設置或返回文本的顏色。
columnCount 設置或返回元素應該被劃分的列數。
columnFill 設置或返回如何填充列。
columnGap 設置或返回列之間的間隙。
columnRule 用于設置或返回所有 columnRule 屬性的簡寫屬性。
columnRuleColor 設置或返回列之間規則的顏色。
columnRuleStyle 設置或返回列之間規則的樣式。
columnRuleWidth 設置或返回列之間規則的寬度。
columns 用于設置或返回 columnWidth 和 columnCount 的簡寫屬性。
columnSpan 設置或返回元素應該跨越多少列。
columnWidth 設置或返回列的寬度。
content 與 :before 和 :after 偽元素一起使用，插入生成的內容。
counterIncrement 增加一個或多個計數器。
counterReset 創建或重置一個或多個計數器。
cursor 設置或返回鼠標指針顯示的光標類型。
direction 設置或返回文本方向。
display 設置或返回元素的顯示類型。
emptyCells 設置或返回是否顯示空單元格的邊框和背景。
filter 設置或返回圖像濾鏡（視覺效果，如模糊和飽和度）。
flex 設置或返回項目的長度，相對于其余部分。
flexBasis 設置或返回彈性項的初始長度。
flexDirection 設置或返回彈性項的方向。
flexFlow flexDirection 和 flexWrap 屬性的簡寫屬性。
flexGrow 設置或返回項目相對于其他項目的增長量。
flexShrink 設置或返回項目相對于其他項目的收縮方式。
flexWrap 設置或返回彈性項是否應換行。
cssFloat 設置或返回元素的水平對齊方式。
font 在一條聲明中設置或返回字體屬性。
fontFamily 設置或返回文本的字體族。
fontSize 設置或返回文本的字體大小。
fontStyle 設置或返回字體的樣式是 normal、italic 還是 oblique。
fontVariant 設置或返回字體是否應以小型大寫字母顯示。
fontWeight 設置或返回字體的粗細。
fontSizeAdjust 發生字體回退時保持文本的可讀性。
fontStretch 從字體系列中選擇伸縮變形方式。
hangingPunctuation 規定標點符號是否可以放在行框之外。
height 設置或返回元素的高度。
hyphens 設置如何拆分單詞以改善段落的布局。
icon 使作者能夠使用標志性等價物來設置元素的樣式。
imageOrientation 規定用戶代理應用于圖像的向右或順時針方向的旋轉。
isolation 定義元素是否必須創建新的堆疊內容。
justifyContent 當項目未使用所有可用空間時，設置或返回彈性容器內項目之間的對齊方式。
left 設置或返回定位元素的左側位置。
letterSpacing 設置或返回文本中字符之間的空間。
lineHeight 設置或返回文本中行之間的距離。
listStyle 在一條聲明中設置或返回列表樣式。
listStyleImage 設置或返回圖像作為列表項標記。
listStylePosition 設置或返回列表項標記的位置。
listStyleType 設置或返回列表項標記的類型。
margin 設置或返回元素的外邊距（最多可以設置四個值）。
marginBottom 設置或返回元素的下外邊距。
marginLeft 設置或返回元素的左外邊距。
marginRight 設置或返回元素的右外邊距。
marginTop 設置或返回元素的上外邊距。
maxHeight 設置或返回元素的最大高度。
maxWidth 設置或返回元素的最大寬度。
minHeight 設置或返回元素的最小高度。
minWidth 設置或返回元素的最小寬度。
navDown 設置或返回使用向下箭頭導航鍵時的導航位置。
navIndex 設置或返回元素的跳轉順序。
navLeft 設置或返回使用左箭頭導航鍵時的導航位置。
navRight 設置或返回使用右箭頭導航鍵時的導航位置。
navUp 設置或返回使用上箭頭導航鍵時的導航位置。
objectFit 指定替換元素的內容應如何適合由其使用的高度和寬度建立的框。
objectPosition 指定被替換元素在其框內的對齊方式。
opacity 設置或返回元素的不透明度級別。
order 設置或返回彈性項相對于其余項的順序。
orphans 設置或返回元素內部發生分頁時必須留在頁面底部的元素的最小行數。
outline 在一條聲明中設置或返回所有 outline 屬性。
outlineColor 設置或返回元素周圍輪廓的顏色。
outlineOffset 偏移輪廓，并將其繪制到邊框邊緣之外。
outlineStyle 設置或返回元素周圍輪廓的樣式。
outlineWidth 設置或返回元素周圍輪廓的寬度。
overflow 設置或返回如何處理在元素框外呈現的內容。
overflowX 規定如何處理內容的左/右邊緣，如果它溢出元素的內容區域。
overflowY 指定如何處理內容的上/下邊緣，如果它溢出元素的內容區域。
padding 設置或返回元素的內邊距（最多可以設置四個值）。
paddingBottom 設置或返回元素的下內邊距。
paddingLeft 設置或返回元素的左內邊距。
paddingRight 設置或返回元素的右內邊距。
paddingTop 設置或返回元素的上內邊距。
pageBreakAfter 設置或返回元素后的分頁行為。
pageBreakBefore 設置或返回元素前的分頁行為。
pageBreakInside 設置或返回元素內的分頁行為。
perspective 設置或返回有關如何查看 3D 元素的視角。
perspectiveOrigin 設置或返回 3D 元素的底部位置。
position 設置或返回用于元素的定位方法的類型（靜態、相對、絕對或固定）。
quotes 設置或返回嵌入引號的引號類型。
resize 設置或返回元素是否可以被用戶調整大小。
right 設置或返回定位元素的右側位置。
scrollBehavior 規定當用戶單擊可滾動框內的鏈接時，是否有平滑滾動定位的動畫效果，而不是直接跳轉。
tableLayout 設置或返回表格單元格、行和列的布局方式。
tabSize 設置或返回制表符的長度。
textAlign 設置或返回文本的水平對齊方式。
textAlignLast 當 text-align 為 "justify" 時，設置或返回塊的最后一行或強制換行之前的行如何對齊。
textDecoration 設置或返回文本裝飾。
textDecorationColor 設置或返回文本裝飾的顏色。
textDecorationLine 設置或返回文本裝飾中的行類型。
textDecorationStyle 設置或返回文本裝飾中線條的樣式。
textIndent 設置或返回第一行文本的縮進。
textJustify 設置或返回 text-align 為 "justify" 時使用的對齊方法。
textOverflow 設置或返回文本溢出包含元素時應該發生的情況。
textShadow 設置或返回文本的陰影效果。
textTransform 設置或返回文本的大小寫。
top 設置或返回定位元素的頂部位置。
transform 對元素應用 2D 或 3D 變換。
transformOrigin 設置或返回被轉換元素的位置。
transformStyle 設置或返回嵌套元素在 3D 空間中的渲染方式。
transition 用于設置或返回四個轉換屬性的簡寫屬性。
transitionProperty 設置或返回過渡效果的 CSS 屬性。
transitionDuration 設置或返回過渡效果完成所需的秒數或毫秒數。
transitionTimingFunction 設置或返回過渡效果的速度曲線。
transitionDelay 設置或返回過渡效果何時開始。
unicodeBidi 設置或返回是否應覆蓋文本以支持同一文檔中的多種語言。
userSelect 設置或返回是否可以選擇元素的文本。
verticalAlign 設置或返回元素中內容的垂直對齊方式。
visibility 設置或返回元素是否可見。
whiteSpace 設置或返回如何處理文本中的制表符、換行符和空格。
width 設置或返回元素的寬度。
wordBreak 設置或返回非 CJK 腳本的換行規則。
wordSpacing 設置或返回文本中的單詞間距。
wordWrap 允許長的、不可打斷的單詞被打斷并換行到下一行。
widows 設置或返回必須在頁面頂部可見的元素的最小行數。
zIndex 設置或返回定位元素的堆棧順序。

訪問 Style 對象

可以從文檔的 head 部分或具體的 HTML 元素訪問 Style 對象。

例子 1

從文檔的 head 部分訪問樣式對象：

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

親自試一試

例子 2

訪問指定元素的樣式對象：

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

親自試一試

創建 Style 對象

例子 1

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

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

親自試一試

例子 2

您還可以設置現有元素的樣式屬性：

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

親自試一試

相關頁面

HTML 教程：HTML CSS

CSS 教程：CSS 教程

HTML 參考手冊：HTML <style> 標簽

CSS 參考手冊：CSS 屬性