HTML DOM Style 对象

阅读（0）
赞（0）
踩（0）
纠错

Style 对象

Style 对象代表单独的样式声明。

Style 对象属性

属性	描述
alignContent	设置或返回弹性容器内的行之间的对齐方式，当项目不使用所有可用空间时。
alignItems	设置或返回弹性容器内项目的对齐方式。
alignSelf	设置或返回弹性容器内选定项目的对齐方式。
animation	所有动画属性的简写属性，animationPlayState 属性除外。
animationDelay	设置或返回动画何时开始。
animationDirection	设置或返回动画是否应在交替循环中反向播放。
animationDuration	设置或返回动画完成一个周期所需的秒数或毫秒数。
animationFillMode	设置或返回动画在执行时间之外应用的值。
animationIterationCount	设置或返回动画应播放的次数。
animationName	设置或返回 @keyframes 动画的名称。
animationPlayState	设置或返回动画是正在运行还是暂停。
animationTimingFunction	设置或返回动画的速度曲线。
background	在一条声明中设置或返回所有背景属性。
backgroundAttachment	设置或返回背景图像是固定的还是随页面滚动。
backgroundClip	设置或返回背景的绘制区域。
backgroundColor	设置或返回元素的背景颜色。
backgroundImage	设置或返回元素的背景图像。
backgroundOrigin	设置或返回背景图像的定位区域。
backgroundPosition	设置或返回背景图像的起始位置。
backgroundRepeat	设置或返回如何重复（平铺）背景图像。
backgroundSize	设置或返回背景图像的大小。
backfaceVisibility	设置或返回元素在不面向屏幕时是否可见。
border	在一条声明中设置或返回边框宽度、边框样式和边框颜色。
borderBottom	在一条声明中设置或返回所有 borderBottom 属性。
borderBottomColor	设置或返回下边框的颜色。
borderBottomLeftRadius	设置或返回左下角边框的形状。
borderBottomRightRadius	设置或返回右下角边框的形状。
borderBottomStyle	设置或返回下边框的样式。
borderBottomWidth	设置或返回下边框的宽度。
borderCollapse	设置或返回表格边框是否应该折叠成单边框。
borderColor	设置或返回元素边框的颜色（最多可以设置四个值）。
borderImage	用于设置或返回所有 borderImage 属性的简写属性。
borderImageOutset	设置或返回边框图像区域超出边框 box 的量。
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	将一个或多个阴影附加到框（box）。
boxSizing	允许您定义某些元素以某种方式适合某个区域。
captionSide	设置或返回表格标题的位置。
caretColor	设置或返回元素的插入符号/光标的颜色。
clear	设置或返回元素相对于浮动对象的位置。
clip	设置或返回定位元素的哪一部分可见。
color	设置或返回文本的颜色。
columnCount	设置或返回元素应该被划分的列数。
columnFill	设置或返回如何填充列。
columnGap	设置或返回列之间的间隙。
columnRule	用于设置或返回所有 columnRule 属性的简写属性。
columnRuleColor	设置或返回列之间规则的颜色。
columnRuleStyle	设置或返回列之间规则的样式。
columnRuleWidth	设置或返回列之间规则的宽度。
columns	用于设置或返回 columnWidth 和 columnCount 的简写属性。
columnSpan	设置或返回元素应该跨越多少列。
columnWidth	设置或返回列的宽度。
content	与 :before 和 :after 伪元素一起使用，插入生成的内容。
counterIncrement	增加一个或多个计数器。
counterReset	创建或重置一个或多个计数器。
cursor	设置或返回鼠标指针显示的光标类型。
direction	设置或返回文本方向。
display	设置或返回元素的显示类型。
emptyCells	设置或返回是否显示空单元格的边框和背景。
filter	设置或返回图像滤镜（视觉效果，如模糊和饱和度）。
flex	设置或返回项目的长度，相对于其余部分。
flexBasis	设置或返回弹性项的初始长度。
flexDirection	设置或返回弹性项的方向。
flexFlow	flexDirection 和 flexWrap 属性的简写属性。
flexGrow	设置或返回项目相对于其他项目的增长量。
flexShrink	设置或返回项目相对于其他项目的收缩方式。
flexWrap	设置或返回弹性项是否应换行。
cssFloat	设置或返回元素的水平对齐方式。
font	在一条声明中设置或返回字体属性。
fontFamily	设置或返回文本的字体族。
fontSize	设置或返回文本的字体大小。
fontStyle	设置或返回字体的样式是 normal、italic 还是 oblique。
fontVariant	设置或返回字体是否应以小型大写字母显示。
fontWeight	设置或返回字体的粗细。
fontSizeAdjust	发生字体回退时保持文本的可读性。
fontStretch	从字体系列中选择伸缩变形方式。
hangingPunctuation	规定标点符号是否可以放在行框之外。
height	设置或返回元素的高度。
hyphens	设置如何拆分单词以改善段落的布局。
icon	使作者能够使用标志性等价物来设置元素的样式。
imageOrientation	规定用户代理应用于图像的向右或顺时针方向的旋转。
isolation	定义元素是否必须创建新的堆叠内容。
justifyContent	当项目未使用所有可用空间时，设置或返回弹性容器内项目之间的对齐方式。
left	设置或返回定位元素的左侧位置。
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() 方法创建 <style> 元素：

var x = document.createElement("STYLE");

亲自试一试

例子 2

您还可以设置现有元素的样式属性：

document.getElementById("myH1").style.color = "red";

亲自试一试

HTML DOM Style 对象

Style 对象

Style 对象属性

访问 Style 对象

例子 1

例子 2

创建 Style 对象

例子 1

例子 2

相关页面