HTML DOM Style 对象
Style 对象
Style 对象表示一个个别的样式声明。
访问 Style 对象
Style 对象可以从文档的头部区域访问，或者从指定的 HTML 元素访问。
从文档的头部区域访问 style 对象：
var x = document.getElementsByTagName("STYLE");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜜蜂教程(mifengjc.com)</title>
<style>
body {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<p>点击按钮显示文档的 style 属性。</p>
<p id="demo"></p>
<button onclick="myFunction()">尝试一下</button>
<script>
function myFunction() {
var x = document.getElementsByTagName("STYLE")[0];
document.getElementById("demo").innerHTML = x.innerHTML;
};
</script>
</body>
</html>
访问一个指定元素的 style 对象：
var x = document.getElementById("myH1").style;
<h1 id="myH1" style="color:red">我的标题</h1>
<p>点击按钮获取 H1 元素的 style 属性。</p>
<p id="demo"></p>
<button onclick="myFunction()">尝试一下</button>
<script>
function myFunction() {
var x = document.getElementById("myH1").style.color;
document.getElementById("demo").innerHTML = x;
};
</script>
创建 Style 对象
您可以使用 document.createElement() 方法来创建 <style> 元素：
var x = document.createElement("STYLE");
<p>点击按钮创建一个 STYLE 元素，并把它放置在头部区域。</p>
<button onclick="myFunction()">尝试一下</button>
<p>被创建的 style 元素包含了改变文档 font 属性的 css 声明。</p>
<script>
function myFunction() {
var x = document.createElement("STYLE");
var t = document.createTextNode("body {font:20px verdana;}");
x.appendChild(t);
document.head.appendChild(x);
};
</script>
您也可以设置一个已有元素的 style 属性：
document.getElementById("myH1").style.color = "red";
<h1 id="myH1">如何改变标题的样式</h1>
<p>点击按钮改变 H1 元素的样式。</p>
<button onclick="myFunction()">尝试一下</button>
<script>
function myFunction() {
document.getElementById("myH1").style.color = "red";
};
</script>
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 |