HTML DOM Style-objekt

Style-objekt

Style-objektet representerar en enskild stildeklaration.

Style-objektets egenskaper

Egenskap Beskrivning
alignContent Ställ in eller returnera hur raderna i en stretch-container ska vara centrerade när objekt inte använder all tillgänglig utrymme.
alignItems Ställ in eller returnera hur objekt i en stretch-container ska vara centrerade.
alignSelf Ställ in eller returnera hur valda objekt i en stretch-container ska vara centrerade.
animation En förkortad egenskap för alla animationsegenskaper, utom animationPlayState.
animationDelay Ställ in eller returnera när animationen ska börja.
animationDirection Ställ in eller returnera om animationen ska spelas i omvänd riktning i en alternativ cykel.
animationDuration Ställ in eller returnera antalet sekunder eller millisekunder som krävs för att animationen ska slutföra en cykel.
animationFillMode Ställ in eller returnera värdet som tillämpas utanför exekveringstiden för animationen.
animationIterationCount Ställ in eller returnera hur många gånger animationen ska spelas.
animationName Ställ in eller returnera namnet på @keyframes-animationen.
animationPlayState Ställ in eller returnera om animationen körs eller pausas.
animationTimingFunction Ställ in eller returnera animationens hastighetskurva.
background Ställ in eller returnera alla bakgrundsegenskaper i en enda deklaration.
backgroundAttachment Ställ in eller returnera om bakgrundsbilden är fast eller rullar med sidan.
backgroundClip Ställ in eller returnera ritningsområdet för bakgrunden.
backgroundColor Ställ in eller returnera elementets bakgrundsfärg.
backgroundImage Ställ in eller returnera elementets bakgrundsbild.
backgroundOrigin 设置或返回背景图像的定位区域。
backgroundPosition Ställ in eller returnera定位区域 för bakgrundsbilden.
backgroundPosition Ställ in eller returnera startpositionen för bakgrundsbilden.
backgroundRepeat Ställ in eller returnera hur bakgrundsbilden upprepas (tappetseras).
backgroundSize Ställ in eller returnera storleken på bakgrundsbilden.
backfaceVisibility Ställ in eller returnera om elementet är synligt när det inte är vändt mot skärmen.
borderBottom Ställ in eller returnera alla borderBottom-attribut på en enda deklaration.
borderBottomColor Ställ in eller returnera färgen på nedre kantlinje.
borderBottomLeftRadius Ställ in eller returnera formen på nedersta vänstra kantlinjen.
borderBottomRightRadius Ställ in eller returnera formen på nedersta högra kantlinjen.
borderBottomStyle Ställ in eller returnera stilen på nedre kantlinje.
borderBottomWidth Ställ in eller returnera bredden på nedre kantlinje.
borderCollapse Ställ in eller returnera om tabellkanten ska sammanföras till en enda kant.
borderColor Ställ in eller returnera elementets kantlinjefärg (max fyra värden kan ställas in).
borderImage En förkortning för att ställa in eller returnera alla borderImage-attribut.
borderImageOutset Ställ in eller returnera mängden som bildkanten överstiger kantboxen.
borderImageRepeat Ställ in eller returnera om bildkanten ska upprepas, omge eller sträcka ut.
borderImageSlice Ställ in eller returnera mängden inre avstånd för bildkanten.
borderImageSource Ställ in eller returnera bilden som används som kant.
borderImageWidth Ställ in eller returnera bredden på bildkanten.
borderLeft Ställ in eller returnera alla borderLeft-attribut på en enda deklaration.
borderLeftColor Ställ in eller returnera färgen på vänster kantlinje.
borderLeftStyle Ställ in eller returnera stilen på vänster kantlinje.
borderLeftWidth Ställ in eller returnera bredden på vänster kantlinje.
borderRadius En förkortning för att ställa in eller returnera alla fyra borderRadius-attribut.
borderRight Ställ in eller returnera alla borderRight-attribut på en enda deklaration.
borderRightColor Ställ in eller returnera färgen på höger kantlinje.
borderRightStyle 设置或返回右边框的样式。
borderRightStyle ställa in eller återställa stilen för högra kanten.
borderRightWidth ställa in eller återställa bredden på högra kanten.
borderSpacing ställa in eller återställa utrymmet mellan cellerna i en tabell.
borderStyle ställa in eller återställa stilen för elementets kant (upp till fyra värden kan ställas in).
borderTop Ställ in eller återställ alla borderTop-egenskaper i ett uttalande.
borderTopColor ställa in eller återställa färgen på övre kanten.
borderTopLeftRadius ställa in eller återställa formen för vänstra övre kanten.
borderTopRightRadius ställa in eller återställa stilen för övre kanten.
borderTopWidth ställa in eller återställa bredden på övre kanten.
borderWidth ställa in eller återställa bredden på elementets kant (upp till fyra värden kan ställas in).
bottom Ställ in eller återställ läget för botten på positioneringsobjektet.
boxDecorationBreak Ställ in eller återställ beteendet för bakgrund och kantlinjer vid sidopagination, eller beteendet för inrelement vid radbrytning.
boxShadow Lägg till en eller flera skuggor till en ram (box).
boxSizing Tillåter dig att definiera vissa element så att de passar in i en viss region.
captionSide ställa in eller återställa positionen för tabellens titel.
caretColor ställa in eller återställa färgen på insättningsmarkören/pekarens färg.
clear ställa in eller återställa elementets position relativt flytande objekt.
clip ställa in eller återställa vilket del av positioneringsobjektet som är synligt.
color ställa in eller återställa textens färg.
columnCount ställa in eller återställa antalet kolumner som elementet bör delas upp i.
columnFill ställa in eller återställa hur kolumnerna fylls.
columnGap ställa in eller återställa avståndet mellan kolumnerna.
columnRule En förkortningsegenskap för att ställa in eller återställa alla columnRule-egenskaper.
columnRuleColor ställa in eller återställa färgen för regeln mellan kolumnerna.
columnRuleStyle ställa in eller återställa stilen för regeln mellan kolumnerna.
columnRuleWidth ställa in eller återställa bredden mellan kolumnerna.
columns En förkortningsegenskap för att ställa in eller återställa columnWidth och columnCount.
columnSpan ställa in eller återställa hur många kolumner elementet bör korsa.
columnWidth ställa in eller återställa kolumnens bredd.
content Används tillsammans med :before och :after-pseudoelement för att infoga genererat innehåll.
counterIncrement Öka en eller flera räknare.
counterReset Skapa eller återställ en eller flera räknare.
cursor Ställ in eller returnera den cursor som visas vid muspekaren.
direction Ställ in eller returnera textens riktning.
display Ställ in eller returnera elementets visningstyp.
emptyCells Ställ in eller returnera om ramen och bakgrunden för tomma celler ska visas.
filter Ställ in eller returnera bildfilter (visuella effekter som suddighet och saturation).
flex Ställ in eller returnera postens längd jämfört med övriga delar.
flexBasis Ställ in eller returnera den inledande längden för en stretchbar post.
flexDirection Ställ in eller returnera riktningen för en stretchbar post.
flexFlow Kortformad egenskap för flexDirection och flexWrap.
flexGrow Ställ in eller returnera hur en post växer jämfört med andra poster.
flexShrink Ställ in eller returnera hur en post kontraherar jämfört med andra poster.
flexWrap Ställ in eller returnera om en stretchbar post ska brytas över raden.
cssFloat Ställ in eller returnera elementets horisontella justering.
font Ställ in eller returnera typsnittsattributen i ett uttalande.
fontFamily Ställ in eller returnera textens typsnittsfamilj.
fontSize Ställ in eller returnera textens teckenstorlek.
fontStyle Ställ in eller returnera om tecknets stil är normal, kursiv eller släppande.
fontVariant Ställ in eller returnera om tecknet ska visas som små versaler.
fontWeight Ställ in eller returnera tyckets tjocklek.
fontSizeAdjust Behåll textens läsbarhet vid typsnittsåterställning.
fontStretch Välj utdragningssätt från typsnittsfamiljen.
hangingPunctuation Bestäm om interpunktionstecken får placeras utanför radramet.
höjd Ställ in eller returnera elementets höjd.
hyphens Ställ in hur ord delas upp för att förbättra avsnittets layout.
ikon Låt författaren använda symboliska ekvivalenter för att ställa in elementets stil.
imageOrientation Bestäm användaragentens tillämpning av höger- eller klockvis rotation på bilden.
isolation Definiera om ett element måste skapa nytt staplat innehåll.
justifyContent När objektet inte använder all tillgänglig utrymme, ställ in eller returnera sättet att justera objektens position inom en stretchbar behållare.
vänster Ställ in eller returnera den vänstra positionen för en positionerad element.
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() 方法创建