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