HTML DOM Style 对象
Style 对象
Style 对象表示单个样式语句。
Style 对象属性
属性 | 描述 |
---|---|
alignContent | 设置或返回灵活容器内各行之间的对齐方式,当项目未占用所有可用空间时生效。 |
alignItems | 设置或返回灵活容器内项目的对齐方式。 |
alignSelf | 设置或返回灵活容器内所选项目的对齐方式。 |
animation | 所有动画属性(除了 animationPlayState 属性)的简写属性。 |
animationDelay | 设置或返回动画开始时间。 |
animationDirection | 设置或返回动画是否应在交替循环时反向播放。 |
animationDuration | 设置或返回动画完成一个循环所需的时间(以秒或毫秒为单位)。 |
animationFillMode | 设置或返回在动画执行时间之外应用的值。 |
animationIterationCount | 设置或返回动画应播放的次数。 |
animationName | 设置或返回 @keyframes 动画的名称。 |
animationTimingFunction | 设置或返回动画的速度曲线。 |
animationPlayState | 设置或返回动画是正在运行还是已暂停。 |
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 | 设置或返回元素的插入符号/光标颜色。 |
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 | 在一个声明中设置或返回 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 | 设置或返回元素的制表顺序。 |
navLeft | 设置或返回使用向左箭头导航键时导航到的位置。 |
navRight | 设置或返回使用向右箭头导航键时导航到的位置。 |
navUp | 设置或返回使用向上箭头导航键时导航到的位置。 |
objectFit | 指定替换元素的内容应如何适合其使用的 height 和 width 属性所确定的框。 |
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 | 设置或返回用于元素的定位方法类型(static、relative、absolute 或 fixed)。 |
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 | 设置或返回非中日韩文字的断行规则 |
wordSpacing | 设置或返回文本中单词之间的间距 |
wordWrap | 允许将长而不可分割的单词分解并在下一行换行 |
widows | 设置或返回必须在页面顶部可见的元素的最小行数 |
zIndex | 设置或返回定位元素的堆叠顺序 |
访问样式对象
可以从文档的头部部分或从特定 HTML 元素访问样式对象。
从文档的头部部分访问样式对象
访问指定元素的样式对象
创建样式对象
可以使用 document.createElement() 方法创建