HTML DOM Style 对象

Style 对象

Style 对象表示一个个别的样式声明。

访问 Style 对象

Style 对象可以从文档的头部区域访问，或者从指定的 HTML 元素访问。

从文档的头部区域访问 style 对象：

var x = document.getElementsByTagName("STYLE"); 尝试一下

访问一个指定元素的 style 对象：

var x = document.getElementById("myH1").style; 尝试一下

创建 Style 对象

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

var x = document.createElement("STYLE"); 尝试一下

您也可以设置一个已有元素的 style 属性：

document.getElementById("myH1").style.color = "red"; 尝试一下

Style 对象属性

"CSS" 列表示该属性是在哪一个 CSS 版本中定义的（CSS1、CSS2 或 CSS3）。

属性 描述 CSS
alignContent 设置或返回当灵活容器内的各项没有占用所有可用的空间时各项之间的对齐方式（水平）。 3
alignItems 设置或返回灵活容器内的各项的对齐方式。 3
alignSelf 设置或返回灵活容器内被选中项目的对齐方式。 3
animation 是下面除了 animationPlayState 属性之外的其他属性的速记属性。 3
animationDelay 设置或返回动画何时开始。 3
animationDirection 设置或返回是否循环交替反向播放动画。 3
animationDuration 设置或返回动画完成需花费的秒数或毫秒数。 3
animationFillMode 设置或返回当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 3
animationIterationCount 设置或返回动画的播放次数。 3
animationName 设置或返回关键帧 @keyframes 动画的名称。 3
animationTimingFunction 设置或返回动画的速度曲线。 3
animationPlayState 设置或返回动画是运行的还是暂停的。 3
background 设置或返回在一个声明中的所有背景属性。 1
backgroundAttachment 设置或返回背景图像是否固定或随页面滚动。 1
backgroundColor 设置或返回元素的背景色。 1
backgroundImage 设置或返回元素的背景图像。 1
backgroundPosition 设置或返回的背景图像的起始位置。 1
backgroundRepeat 设置或返回如何重复背景图像。 1
backgroundClip 设置或返回背景的绘制区域。 3
backgroundOrigin 设置或返回背景图像的定位区域。 3
backgroundSize 设置或返回背景图像的大小。 3
backfaceVisibility 设置或返回当一个元素背对屏幕时是否可见。 3
border 设置或返回在一个声明中的 borderWidth、borderStyle 和 borderColor。 1
borderBottom 设置或返回在一个声明中的所有 borderBottom* 属性。 1
borderBottomColor 设置或返回下边框的颜色。 1 
borderBottomLeftRadius 设置或返回左下角边框的形状。 3
borderBottomRightRadius 设置或返回右下角边框的形状。 3
borderBottomStyle 设置或返回下边框的样式。 1
borderBottomWidth 设置或返回下边框的宽度。 1
borderCollapse 设置或返回表格的边框是否被折叠为一个单一的边框。 2
borderColor 设置或返回元素边框的颜色（最多可以有四个值）。 1
borderImage 一个用于设置或返回所有的 borderImage* 属性的速记属性。 3
borderImageOutset 设置或返回边框图像区域超出边界框的量。 3
borderImageRepeat 设置或返回图像边框是重复拼接图块还是延伸图块。 3
borderImageSlice 设置或返回图像边框的向内偏移。 3
borderImageSource 设置或返回要作为边框使用的图像。 3
borderImageWidth 设置或返回图像边框的宽度。 3
borderLeft 设置或返回在一个声明中的所有 borderLeft* 属性。 1
borderLeftColor 设置或返回左边框的颜色。 1
borderLeftStyle 设置或返回左边框的样式。 1
borderLeftWidth 设置或返回左边框的宽度。 1
borderRadius 一个用于设置或返回四个 border*Radius 属性的速记属性。 3
borderRight 设置或返回在一个声明中的所有 borderRight* 属性。 1
borderRightColor 设置或返回右边框的颜色。 1
borderRightStyle 设置或返回右边框的样式。 1
borderRightWidth 设置或返回右边框的宽度。 1
borderSpacing 设置或返回表格中单元格之间的距离。 2
borderStyle 设置或返回元素边框的样式（最多可以有四个值）。 1
borderTop 设置或返回在一个声明中的所有 borderTop* 属性。 1
borderTopColor 设置或返回上边框的颜色。 1
borderTopLeftRadius 设置或返回左上角边框的形状。 3
borderTopRightRadius 设置或返回右上角边框的形状。 3
borderTopStyle 设置或返回上边框的样式。 1
borderTopWidth 设置或返回上边框的宽度。 1
borderWidth 设置或返回元素边框的宽度（最多可以有四个值）。 1
bottom 设置或返回定位元素的底部位置。 2
boxDecorationBreak 设置或返回分页处元素的背景和边框行为，或者换行处内联元素的背景和边框行为。 3
boxShadow 设置或返回元素的下拉阴影。 3
boxSizing 允许您以特定的方式定义匹配某个区域的特定元素。 3
captionSide 设置或返回表格标题的位置。 2
clear 设置或返回元素相对浮动对象的位置。 1
clip 设置或返回定位元素的可见部分。 2
color 设置或返回文本的颜色。 1
columnCount 设置或返回元素应该被划分的列数。 3
columnFill 设置或返回如何填充列。 3
columnGap 设置或返回列之间的间隔。 3
columnRule 一个用于设置或返回所有的 columnRule* 属性的速记属性。 3
columnRuleColor 设置或返回列之间的颜色规则。 3
columnRuleStyle 设置或返回列之间的样式规则。 3
columnRuleWidth 设置或返回列之间的宽度规则。 3
columns 一个用于设置或返回 columnWidth 和 columnCount 的速记属性。 3
columnSpan 设置或返回一个元素应横跨多少列。 3
columnWidth 设置或返回列的宽度。 3
content 与 :before 和 :after 伪元素一起使用，来插入生成的内容。 2
counterIncrement 增加一个或多个计数器。 2
counterReset 创建或重置一个或多个计数器。 2
cursor 设置或返回鼠标指针显示的光标类型。 2
direction 设置或返回文本的方向。 2
display 设置或返回元素的显示类型。 1
emptyCells 设置或返回是否显示表格中的空单元格的边框和背景。 2
filter 设置或返回图片滤镜(可视效果，如：高斯模糊与饱和度) 3
flex 相对于同一容器其他灵活的项目，设置或返回项目的长度。 3
flexBasis 设置或灵活项目的初始长度。 3
flexDirection 设置或返回灵活项目的方向。 3
flexFlow 是 flexDirection 和 flexWrap 属性的速记属性。 3
flexGrow 设置或返回项目将相对于同一容器内其他灵活的项目进行扩展的量。 3
flexShrink 设置或返回项目将相对于同一容器内其他灵活的项目进行收缩的量。 3
flexWrap 设置或返回灵活项目是否拆行或拆列。 3
cssFloat 设置或返回元素的水平对齐方式。 1
font 设置或返回一个声明中的 fontStyle、fontVariant、fontWeight、fontSize、lineHeight 和 fontFamily。 1
fontFamily 设置或返回文本的字体。 1
fontSize 设置或返回文本的字体尺寸。 1
fontStyle 设置或返回字体样式是否是 normal（正常的）、italic（斜体）或 oblique（倾斜的）。 1
fontVariant 设置或返回是否以小型大写字母显示字体。 1
fontWeight 设置或返回字体的粗细。 1
fontSizeAdjust 当使用备用字体时，确保文本的可读性。 3
fontStretch 从字体库中选择一种正常的、浓缩的或扩大的字体。 3
hangingPunctuation 规定一个标点符号是否可以放置在线框外。 3
height 设置或返回元素的高度。 1
hyphens 设置如何拆分单词来提高段落布局。 3
icon 向作者提供为一个带有等价于图标的元素定义样式的功能。 3
imageOrientation 规定一个用户代理应用到图像上的顺时针方向的旋转。 3
justifyContent 设置或返回当灵活容器内的各项没有占用所有可用的空间时各项之间的对齐方式（垂直）。 3
left 设置或返回定位元素的左部位置。 2
letterSpacing 设置或返回文本中字符之间的空间。 1
lineHeight 设置或返回在文本中行之间的距离。 1
listStyle 设置或返回一个声明中的 listStyleImage、listStylePosition 和 listStyleType。 1
listStyleImage 设置或返回作为列表项标记的图像。 1
listStylePosition 设置或返回列表项标记的位置。 1
listStyleType 设置或返回列表项标记的类型。 1
margin 设置或返回元素的外边距（最多可以有四个值）。 1
marginBottom 设置或返回元素的的下外边距。 1
marginLeft 设置或返回元素的左外边距。 1
marginRight 设置或返回元素的右外边距。 1
marginTop 设置或返回元素的上外边距。 1
maxHeight 设置或返回元素的最大高度。 2
maxWidth 设置或返回元素的最大宽度。 2
minHeight 设置或返回元素的最小高度。 2
minWidth 设置或返回元素的最小宽度。 2
navDown 设置或返回当使用向下箭头导航键时要导航到哪里。 3
navIndex 设置或返回元素的显示顺序。 3
navLeft 设置或返回当使用向左箭头导航键时要导航到哪里。 3
navRight 设置或返回当使用向右箭头导航键时要导航到哪里。 3
navUp 设置或返回当使用向上箭头导航键时要导航到哪里。 3
opacity 设置或返回元素的不透明度。 3
order 设置或返回一个灵活的项目相对于同一容器内其他灵活项目的顺序。 3
orphans 设置或返回当元素内有分页时，必须在页面底部预留的最小行数。 2
outline 设置或返回在一个声明中的所有 outline 属性。 2
outlineColor 设置或返回一个元素周围的轮廓颜色。 2
outlineOffset 对轮廓进行偏移，并在边框边缘进行绘制。 3
outlineStyle 设置或返回一个元素周围的轮廓样式。 2
outlineWidth 设置或返回一个元素周围的轮廓宽度。 2
overflow 设置或返回如何处理呈现在元素框外面的内容。 2
overflowX 规定如果内容溢出元素的内容区域，是否对内容的左/右边缘进行裁剪。 3
overflowY 规定如果内容溢出元素的内容区域，是否对内容的上/下边缘进行裁剪。 3
padding 设置或返回元素的内边距（最多可以有四个值）。 1
paddingBottom 设置或返回元素的下内边距。 1
paddingLeft 设置或返回元素的左内边距。 1
paddingRight 设置或返回元素的右内边距。 1
paddingTop 设置或返回元素的上内边距。 1
pageBreakAfter 设置或返回元素后的分页行为。 2
pageBreakBefore 设置或返回元素前的分页行为。 2
pageBreakInside 设置或返回元素内的分页行为。 2
perspective 设置或返回 3D 元素被查看的视角。 3
perspectiveOrigin 设置或返回 3D 元素的底部位置。 3
position 设置或返回用于元素定位方法的类型（static、relative、absolute 或 fixed）。 2
quotes 设置或返回嵌入引用的引号类型。 2
resize 设置或返回是否可由用户调整元素的尺寸大小。 3
right 设置或返回定位元素的右部位置。 2
tableLayout 设置或返回表格单元格、行、列的布局方式。 2
tabSize 设置或返回制表符（tab）字符的长度。 3
textAlign 设置或返回文本的水平对齐方式。 1
textAlignLast 设置或返回当 text-align 属性设置为 "justify" 时，如何对齐一个强制换行符前的最后一行。 3
textDecoration 设置或返回文本的修饰。 1
textDecorationColor 设置或返回文本修饰的颜色。 3
textDecorationLine 设置或返回文本修饰要使用的线条类型。 3
textDecorationStyle 设置或返回文本修饰中的线条样式。 3
textIndent 设置或返回文本第一行的缩进。 1
textJustify 设置或返回当 text-align 属性设置为 "justify" 时，要使用的对齐方法。 3
textOverflow 设置或返回当文本溢出包含它的元素，应该发生什么。 3
textShadow 设置或返回文本的阴影效果。 3
textTransform 设置或返回文本的大小写。 1
top 设置或返回定位元素的顶部位置。 2
transform 向元素应用 2D 或 3D 转换。 3
transformOrigin 设置或返回被转换元素的位置。 3
transformStyle 设置或返回被嵌套的元素如何呈现在 3D 空间中。 3
transition 一个用于设置或返回四个过渡属性的速记属性。 3
transitionProperty 应用过渡效果的 CSS 属性的名称。 3
transitionDuration 设置或返回完成过渡效果需要花费的时间（以秒或毫秒计）。 3
transitionTimingFunction 设置或返回过渡效果的速度曲线。 3
transitionDelay 设置或返回过渡效果何时开始。 3
unicodeBidi 设置或返回文本是否被重写，以便在同一文档中支持多种语言。 2
verticalAlign 设置或返回元素中内容的垂直对齐方式。 1
visibility 设置或返回元素是否应该是可见的。 2
whiteSpace 设置或返回如何处理文本中的制表符、换行符和空格符。 1
width 设置或返回元素的宽度。 1
wordBreak 设置或返回非 CJK 语言的换行规则。 3
wordSpacing 设置或返回文本中单词之间的空间。 1
wordWrap 允许长单词或 URL 地址换行到下一行。 3
widows 设置或返回一个元素必须在页面顶部的可见行的最小数量。 2
zIndex 设置或返回定位元素的堆叠顺序。 2