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 屬性