转自“http://www.w3school.com.cn/jsref/dom_obj_style.asp”
HTML DOM Style 对象
Style 对象
Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。
使用 Style 对象属性的语法:
document.getElementById("id").style.property="值"
Style 对象的属性:
Background 属性
属性 | 描述 |
---|---|
background | 在一行中设置所有的背景属性 |
backgroundAttachment | 设置背景图像是否固定或随页面滚动 |
backgroundColor | 设置元素的背景颜色 |
backgroundImage | 设置元素的背景图像 |
backgroundPosition | 设置背景图像的起始位置 |
backgroundPositionX | 设置backgroundPosition属性的X坐标 |
backgroundPositionY | 设置backgroundPosition属性的Y坐标 |
backgroundRepeat | 设置是否及如何重复背景图像 |
Border 和 Margin 属性
属性 | 描述 |
---|---|
border | 在一行设置四个边框的所有属性 |
borderBottom | 在一行设置底边框的所有属性 |
borderBottomColor | 设置底边框的颜色 |
borderBottomStyle | 设置底边框的样式 |
borderBottomWidth | 设置底边框的宽度 |
borderColor | 设置所有四个边框的颜色 (可设置四种颜色) |
borderLeft | 在一行设置左边框的所有属性 |
borderLeftColor | 设置左边框的颜色 |
borderLeftStyle | 设置左边框的样式 |
borderLeftWidth | 设置左边框的宽度 |
borderRight | 在一行设置右边框的所有属性 |
borderRightColor | 设置右边框的颜色 |
borderRightStyle | 设置右边框的样式 |
borderRightWidth | 设置右边框的宽度 |
borderStyle | 设置所有四个边框的样式 (可设置四种样式) |
borderTop | 在一行设置顶边框的所有属性 |
borderTopColor | 设置顶边框的颜色 |
borderTopStyle | 设置顶边框的样式 |
borderTopWidth | 设置顶边框的宽度 |
borderWidth | 设置所有四条边框的宽度 (可设置四种宽度) |
margin | 设置元素的边距 (可设置四个值) |
marginBottom | 设置元素的底边距 |
marginLeft | 设置元素的左边距 |
marginRight | 设置元素的右边据 |
marginTop | 设置元素的顶边距 |
outline | 在一行设置所有的outline属性 |
outlineColor | 设置围绕元素的轮廓颜色 |
outlineStyle | 设置围绕元素的轮廓样式 |
outlineWidth | 设置围绕元素的轮廓宽度 |
padding | 设置元素的填充 (可设置四个值) |
paddingBottom | 设置元素的下填充 |
paddingLeft | 设置元素的左填充 |
paddingRight | 设置元素的右填充 |
paddingTop | 设置元素的顶填充 |
Layout 属性
属性 | 描述 |
---|---|
clear | 设置在元素的哪边不允许其他的浮动元素 |
clip | 设置元素的形状 |
content | 设置元信息 |
counterIncrement | 设置其后是正数的计数器名称的列表。其中整数指示每当元素出现时计数器的增量。默认是1。 |
counterReset | 设置其后是正数的计数器名称的列表。其中整数指示每当元素出现时计数器被设置的值。默认是0。 |
cssFloat | 设置图像或文本将出现(浮动)在另一元素中的何处。 |
cursor | 设置显示的指针类型 |
direction | 设置元素的文本方向 |
display | 设置元素如何被显示 |
height | 设置元素的高度 |
markerOffset | 设置marker box的principal box距离其最近的边框边缘的距离 |
marks | 设置是否cross marks或crop marks应仅仅被呈现于page box边缘之外 |
maxHeight | 设置元素的最大高度 |
maxWidth | 设置元素的最大宽度 |
minHeight | 设置元素的最小高度 |
minWidth | 设置元素的最小宽度 |
overflow | 规定如何处理不适合元素盒的内容 |
verticalAlign | 设置对元素中的内容进行垂直排列 |
visibility | 设置元素是否可见 |
width | 设置元素的宽度 |
List 属性
属性 | 描述 |
---|---|
listStyle | 在一行设置列表的所有属性 |
listStyleImage | 把图像设置为列表项标记 |
listStylePosition | 改变列表项标记的位置 |
listStyleType | 设置列表项标记的类型 |
Positioning 属性
属性 | 描述 |
---|---|
bottom | 设置元素的底边缘距离父元素底边缘的之上或之下的距离 |
left | 置元素的左边缘距离父元素左边缘的左边或右边的距离 |
position | 把元素放置在static, relative, absolute 或 fixed 的位置 |
right | 置元素的右边缘距离父元素右边缘的左边或右边的距离 |
top | 设置元素的顶边缘距离父元素顶边缘的之上或之下的距离 |
zIndex | 设置元素的堆叠次序 |
Printing 属性
属性 | 描述 |
---|---|
orphans | 设置段落留到页面底部的最小行数 |
page | 设置显示某元素时使用的页面类型 |
pageBreakAfter | 设置某元素之后的分页行为 |
pageBreakBefore | 设置某元素之前的分页行为 |
pageBreakInside | 设置某元素内部的分页行为 |
size | 设置页面的方向和尺寸 |
widows | 设置段落必须留到页面顶部的最小行数 |
Scrollbar 属性 (IE-only)
属性 | 描述 |
---|---|
scrollbar3dLightColor | 设置箭头和滚动条左侧和顶边的颜色 |
scrollbarArrowColor | 设置滚动条上的箭头颜色 |
scrollbarBaseColor | 设置滚动条的底色 |
scrollbarDarkShadowColor | 设置箭头和滚动条右侧和底边的颜色 |
scrollbarFaceColor | 设置滚动条的表色 |
scrollbarHighlightColor | 设置箭头和滚动条左侧和顶边的颜色,以及滚动条的背景 |
scrollbarShadowColor | 设置箭头和滚动条右侧和底边的颜色 |
scrollbarTrackColor | 设置滚动条的背景色 |
Table 属性
属性 | 描述 |
---|---|
borderCollapse | 设置表格边框是否合并为单边框,或者像在标准的HTML中那样分离。 |
borderSpacing | 设置分隔单元格边框的距离 |
captionSide | 设置表格标题的位置 |
emptyCells | 设置是否显示表格中的空单元格 |
tableLayout | 设置用来显示表格单元格、行以及列的算法 |
Text 属性
属性 | 描述 |
---|---|
color | 设置文本的颜色 |
font | 在一行设置所有的字体属性 |
fontFamily | 设置元素的字体系列。 |
fontSize | 设置元素的字体大小。 |
fontSizeAdjust | 设置/调整文本的尺寸 |
fontStretch | 设置如何紧缩或伸展字体 |
fontStyle | 设置元素的字体样式 |
fontVariant | 用小型大写字母字体来显示文本 |
fontWeight | 设置字体的粗细 |
letterSpacing | 设置字符间距 |
lineHeight | 设置行间距 |
quotes | 设置在文本中使用哪种引号 |
textAlign | 排列文本 |
textDecoration | 设置文本的修饰 |
textIndent | 缩紧首行的文本 |
textShadow | 设置文本的阴影效果 |
textTransform | 对文本设置大写效果 |
unicodeBidi | |
whiteSpace | 设置如何设置文本中的折行和空白符 |
wordSpacing | 设置文本中的词间距 |
标准属性
属性 | 描述 |
---|---|
dir | 设置或返回文本的方向 |
lang | 设置或返回元素的语言代码 |
title | 设置或返回元素的咨询性的标题 |
cssText 属性
它是一组样式属性及其值的文本表示。这个文本格式化为一个 CSS 样式表,去掉了包围属性和值的元素选择器的花括号。
将这一属性设置为非法的值将会抛出一个代码为 SYNTAX_ERR 的 DOMException 异常。当 CSS2Properties 对象是只读的时候,试图设置这一属性将会抛出一个代码为 NO_MODIFICATION_ALLOWED_ERR 的 DOMException 异常。
关于 CSS2Properties 对象
CSS2Properties 对象表示一组 CSS 样式属性及其值。它为 CSS 规范定义的每一个 CSS 属性都定义一个 JavaScript 属性。
一个 HTMLElement 的 style 属性是一个可读可写的 CSS2Properties 对象,就好像 CSSRule 对象的 style 属性一样。不过,Window.getComputedStyle() 的返回值是一个 CSS2Properties 对象,其属性是只读的。