HTML DOM Style 物件
Style 物件
Style 物件表示單個樣式語句。
Style 物件屬性
屬性 | 描述 |
---|---|
alignContent | 設定或返回彈性容器內各行之間的對齊方式,當專案未完全利用所有可用空間時 |
alignItems | 設定或返回彈性容器內專案的對齊方式 |
alignSelf | 設定或返回彈性容器內選定專案的對齊方式 |
animation | 除了 animationPlayState 屬性外,所有以下動畫屬性的簡寫屬性 |
animationDelay | 設定或返回動畫何時開始 |
animationDirection | 設定或返回動畫是否應在交替週期中反向播放 |
animationDuration | 設定或返回動畫完成一個週期需要多少秒或毫秒 |
animationFillMode | 設定或返回動畫在執行時間之外應用的屬性值 |
animationIterationCount | 設定或返回動畫應播放的次數 |
animationName | 設定或返回 @keyframes 動畫的名稱 |
animationTimingFunction | 設定或返回動畫的速度曲線 |
animationPlayState | 設定或返回動畫是正在執行還是已暫停 |
background | 在一個宣告中設定或返回所有 background 屬性 |
backgroundAttachment | 設定或返回背景影像是固定還是隨頁面滾動 |
backgroundColor | 設定或返回元素的背景顏色 |
backgroundImage | 設定或返回元素的背景影像 |
backgroundPosition | 設定或返回背景影像的起始位置 |
backgroundRepeat | 設定或返回如何重複(平鋪)背景影像 |
backgroundClip | 設定或返回背景的繪製區域 |
backgroundOrigin | 設定或返回背景影像的定位區域 |
backgroundSize | 設定或返回背景影像的大小 |
backfaceVisibility | 設定或返回元素在不面向螢幕時是否可見 |
border | 在一個宣告中設定或返回 borderWidth, borderStyle 和 borderColor |
borderBottom | 在一個宣告中設定或返回所有 borderBottom 屬性 |
borderBottomColor | 設定或返回下邊框的顏色 |
borderBottomLeftRadius | 設定或返回左下角的邊框形狀 |
borderBottomRightRadius | 設定或返回右下角的邊框形狀 |
borderBottomStyle | 設定或返回下邊框的樣式 |
borderBottomWidth | 設定或返回下邊框的寬度 |
borderCollapse | 設定或返回表格邊框是否應合併為單個邊框 |
borderColor | 設定或返回元素的邊框顏色(最多可以有四個值) |
borderImage | 用於設定或返回所有 borderImage 屬性的簡寫屬性 |
borderImageOutset | 設定或返回邊框影像區域超出邊框盒的量 |
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 | 為一個或多個盒子新增陰影 |
boxSizing | 允許您以特定方式定義某些元素以適應區域 |
captionSide | 設定或返回表格標題的位置 |
caretColor | 設定或返回元素的插入符/游標顏色 |
清除 | 設定或返回元素相對於浮動物件的位置 |
clip | 設定或返回定位元素可見部分的裁剪區域 |
color | 設定或返回文字顏色 |
columnCount | 設定或返回元素應分為的列數 |
columnFill | 設定或返回如何填充列 |
columnGap | 設定或返回列之間的間隙 |
columnRule | 用於設定或返回所有 columnRule 屬性的簡寫屬性 |
columnRuleColor | 設定或返回列之間分隔線的顏色 |
columnRuleStyle | 設定或返回列之間分隔線的樣式 |
columnRuleWidth | 設定或返回列之間分隔線的寬度 |
columns | 用於設定或返回 columnWidth 和 columnCount 的簡寫屬性 |
columnSpan | 設定或返回元素應跨越的列數 |
columnWidth | 設定或返回列的寬度 |
content | 與 :before 和 :after 偽元素一起使用,以插入生成的內容 |
counterIncrement | 遞增一個或多個計數器 |
counterReset | 建立或重置一個或多個計數器 |
cursor | 設定或返回滑鼠指標顯示的遊標型別 |
direction | 設定或返回文字方向 |
display | 設定或返回元素的顯示型別 |
emptyCells | 設定或返回是否顯示空單元格的邊框和背景 |
篩選器 | 設定或返回影像濾鏡(視覺效果,如模糊和飽和度) |
flex | 設定或返回專案的長度,相對於其餘專案 |
flexBasis | 設定或返回彈性專案的初始長度 |
flexDirection | 設定或返回彈性專案的方向 |
flexFlow | flexDirection 和 flexWrap 屬性的簡寫屬性 |
flexGrow | 設定或返回專案相對於其餘專案的增長量 |
flexShrink | 設定或返回專案相對於其餘專案的收縮量 |
flexWrap | 設定或返回彈性專案是否應換行 |
cssFloat | 設定或返回元素的水平對齊方式 |
font | 在一個宣告中設定或返回 fontStyle, fontVariant, fontWeight, fontSize, lineHeight 和 fontFamily |
fontFamily | 設定或返回文字的字體系列 |
fontSize | 設定或返回文字的字型大小 |
fontStyle | 設定或返回字型的樣式是正常、斜體還是傾斜 |
fontVariant | 設定或返回字型是否應顯示為小型大寫字母 |
fontWeight | 設定或返回字型的粗細 |
fontSizeAdjust | 在字型回退發生時保留文字的可讀性 |
fontStretch | 從字體系列中選擇正常、壓縮或擴充套件的字形 |
hangingPunctuation | 指定標點符號是否可以放置線上框之外 |
height | 設定或返回元素的高度 |
hyphens | 設定如何拆分單詞以改善段落佈局 |
icon | 為作者提供了使用圖示等效樣式化元素的能力 |
imageOrientation | 指定使用者代理應用於影像的向右或順時針旋轉 |
isolation | 定義元素是否必須建立新的堆疊上下文 |
justifyContent | 設定或返回彈性容器內專案之間的對齊方式,當專案未完全利用所有可用空間時。 |
left | 設定或返回定位元素的左側位置 |
letterSpacing | 設定或返回文字中字元之間的間距 |
lineHeight | 設定或返回文字中行之間的距離 |
listStyle | 在一個宣告中設定或返回 listStyleImage, listStylePosition 和 listStyleType |
listStyleImage | 設定或返回影像作為列表項標記 |
listStylePosition | 設定或返回列表項標記的位置 |
listStyleType | 設定或返回列表項標記型別 |
margin | 設定或返回元素的邊距(最多可以有四個值) |
marginBottom | 設定或返回元素的下邊距 |
marginLeft | 設定或返回元素的左邊距 |
marginRight | 設定或返回元素的右邊距 |
marginTop | 設定或返回元素的上邊距 |
maxHeight | 設定或返回元素的最大高度 |
maxWidth | 設定或返回元素的最大寬度 |
minHeight | 設定或返回元素的最小高度 |
minWidth | 設定或返回元素的最小寬度 |
navDown | 設定或返回使用向下箭頭導航鍵時導航到的位置 |
navIndex | 設定或返回元素的 Tab 鍵順序 |
navLeft | 設定或返回使用向左箭頭導航鍵時導航到的位置 |
navRight | 設定或返回使用向右箭頭導航鍵時導航到的位置 |
navUp | 設定或返回使用向上箭頭導航鍵時導航到的位置 |
objectFit | 指定替換元素的內容如何適應其已用高度和寬度所建立的框 |
objectPosition | 指定替換元素在其框內的對齊方式 |
不透明度 | 設定或返回元素的透明度級別 |
order | 設定或返回彈性專案的順序,相對於其餘專案 |
orphans | 設定或返回當元素內發生分頁符時,必須留在頁面底部的元素的最小行數 |
outline | 在一個宣告中設定或返回所有 outline 屬性 |
outlineColor | 設定或返回元素周圍輪廓的顏色 |
outlineOffset | 偏移輪廓,並將其繪製在邊框邊緣之外 |
outlineStyle | 設定或返回元素周圍輪廓的樣式 |
outlineWidth | 設定或返回元素周圍輪廓的寬度 |
overflow | 設定或返回如何處理超出元素框的內容 |
overflowX | 指定如果內容溢位元素的區域,如何處理內容的左/右邊緣 |
overflowY | 指定如果內容溢位元素的區域,如何處理內容的上/下邊緣 |
padding | 設定或返回元素的內邊距(最多可以有四個值) |
paddingBottom | 設定或返回元素的下內邊距 |
paddingLeft | 設定或返回元素的左內邊距 |
paddingRight | 設定或返回元素的右內邊距 |
paddingTop | 設定或返回元素的上內邊距 |
pageBreakAfter | 設定或返回元素後的分頁符行為 |
pageBreakBefore | 設定或返回元素前的分頁符行為 |
pageBreakInside | 設定或返回元素內的分頁符行為 |
perspective | 設定或返回如何檢視 3D 元素的透視 |
perspectiveOrigin | 設定或返回 3D 元素的底部位置 |
position | 設定或返回元素使用的定位方法型別(static、relative、absolute 或 fixed) |
quotes | 設定或返回嵌入式引用的引號型別 |
resize | 設定或返回元素是否可由使用者調整大小 |
right | 設定或返回定位元素的右側位置 |
scrollBehavior | 指定當使用者單擊可滾動框中的連結時,是平滑動畫滾動位置,還是直接跳轉 |
tableLayout | 設定或返回表格單元格、行和列的佈局方式 |
tabSize | 設定或返回 Tab 字元的長度 |
textAlign | 設定或返回文字的水平對齊方式 |
textAlignLast | 設定或返回當 text-align 為 "justify" 時,塊的最後一行或強制換行符之前的行的對齊方式 |
textDecoration | 設定或返回文字的裝飾 |
textDecorationColor | 設定或返回文字裝飾的顏色 |
textDecorationLine | 設定或返回文字裝飾中線的型別 |
textDecorationStyle | 設定或返回文字裝飾中線的樣式 |
textIndent | 設定或返回文字第一行的縮排 |
textJustify | 設定或返回當 text-align 為 "justify" 時使用的對齊方法 |
textOverflow | 設定或返回當文字溢位包含元素時應發生的情況 |
textShadow | 設定或返回文字的陰影效果 |
textTransform | 設定或返回文字的大小寫 |
top | 設定或返回定位元素的頂部位置 |
轉換 | 對元素應用 2D 或 3D 變換 |
transformOrigin | 設定或返回變換元素的位置 |
transformStyle | 設定或返回巢狀元素在 3D 空間中的渲染方式 |
transition | 用於設定或返回所有四個 transition 屬性的簡寫屬性 |
transitionProperty | 設定或返回過渡效果所針對的 CSS 屬性 |
transitionDuration | 設定或返回過渡效果完成所需的時間(秒或毫秒) |
transitionTimingFunction | 設定或返回過渡效果的速度曲線 |
transitionDelay | 設定或返回過渡效果何時開始 |
unicodeBidi | 設定或返回是否應覆蓋文字以支援同一文件中的多種語言 |
userSelect | 設定或返回元素中的文字是否可以被選中 |
verticalAlign | 設定或返回元素中內容的垂直對齊方式 |
可見性 | 設定或返回元素是否可見 |
whiteSpace | 設定或返回如何處理文字中的 Tab 鍵、換行符和空格 |
width | 設定或返回元素的寬度 |
wordBreak | 為非 CJK 指令碼設定或返回斷行規則 |
wordSpacing | 設定或返回文字中單詞之間的間距 |
wordWrap | 允許長的、不可斷開的單詞斷開並換到下一行 |
widows | 設定或返回元素在頁面頂部必須可見的最小行數 |
zIndex | 設定或返回定位元素的堆疊順序 |
訪問 Style 物件
Style 物件可以從文件的頭部部分或特定的 HTML 元素中訪問。
從文件頭部部分訪問 Style 物件
訪問指定元素的 Style 物件
建立 Style 物件
您可以使用 document.createElement() 方法建立一個 <style> 元素
您還可以設定現有元素的樣式屬性
相關頁面
HTML 教程: HTML CSS
CSS 教程: CSS 教程
HTML 參考: HTML <style> 標籤
CSS 參考: CSS 屬性