HTML DOM Style 对象介绍

源自：http://www.w3school.com.cn/htmldom/dom_obj_style.asp

Style 对象

Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。

使用 Style 对象属性的语法：

document.getElementById("id").style.property="值"

Style 对象的属性：

• 背景
• 边框和边距
• 布局
• 列表
• 杂项
• 定位
• 打印
• 滚动条
• 表格
• 文本
• 规范

IE: Internet Explorer, M: 仅适用于 Mac IE, W: 仅适用于 Windows IE,F: Firefox, O: Opera

W3C: 万维网联盟 World Wide Web Consortium (Internet 标准).

Background 属性

属性描述IEFOW3Cbackground在一行中设置所有的背景属性419YesbackgroundAttachment设置背景图像是否固定或随页面滚动419YesbackgroundColor设置元素的背景颜色419YesbackgroundImage设置元素的背景图像419YesbackgroundPosition设置背景图像的起始位置4NoNoYesbackgroundPositionX设置backgroundPosition属性的X坐标4NoNoNobackgroundPositionY设置backgroundPosition属性的Y坐标4NoNoNobackgroundRepeat设置是否及如何重复背景图像419Yes

Border 和 Margin 属性

属性描述IEFOW3Cborder在一行设置四个边框的所有属性419YesborderBottom在一行设置底边框的所有属性419YesborderBottomColor设置底边框的颜色419YesborderBottomStyle设置底边框的样式419YesborderBottomWidth设置底边框的宽度419YesborderColor设置所有四个边框的颜色 (可设置四种颜色)419YesborderLeft在一行设置左边框的所有属性419YesborderLeftColor设置左边框的颜色419YesborderLeftStyle设置左边框的样式419YesborderLeftWidth设置左边框的宽度419YesborderRight在一行设置右边框的所有属性419YesborderRightColor设置右边框的颜色419YesborderRightStyle设置右边框的样式419YesborderRightWidth设置右边框的宽度419YesborderStyle设置所有四个边框的样式 (可设置四种样式)419YesborderTop在一行设置顶边框的所有属性419YesborderTopColor设置顶边框的颜色419YesborderTopStyle设置顶边框的样式419YesborderTopWidth设置顶边框的宽度419YesborderWidth设置所有四条边框的宽度 (可设置四种宽度)419Yesmargin设置元素的边距 (可设置四个值)419YesmarginBottom设置元素的底边距419YesmarginLeft设置元素的左边距419YesmarginRight设置元素的右边据419YesmarginTop设置元素的顶边距419Yesoutline在一行设置所有的outline属性5M19YesoutlineColor设置围绕元素的轮廓颜色5M19YesoutlineStyle设置围绕元素的轮廓样式5M19YesoutlineWidth设置围绕元素的轮廓宽度5M19Yespadding设置元素的填充 (可设置四个值)419YespaddingBottom设置元素的下填充419YespaddingLeft设置元素的左填充419YespaddingRight设置元素的右填充419YespaddingTop设置元素的顶填充419Yes

Layout 属性

属性描述IEFOW3Cclear设置在元素的哪边不允许其他的浮动元素419Yesclip设置元素的形状419Yescontent设置元信息5M1 YescounterIncrement设置其后是正数的计数器名称的列表。其中整数指示每当元素出现时计数器的增量。默认是1。5M1 YescounterReset设置其后是正数的计数器名称的列表。其中整数指示每当元素出现时计数器被设置的值。默认是0。5M1 YescssFloat设置图像或文本将出现（浮动）在另一元素中的何处。5M19Yescursor设置显示的指针类型419Yesdirection设置元素的文本方向519Yesdisplay设置元素如何被显示419Yesheight设置元素的高度419YesmarkerOffset设置marker box的principal box距离其最近的边框边缘的距离5M1 Yesmarks设置是否cross marks或crop marks应仅仅被呈现于page box边缘之外5M1 YesmaxHeight设置元素的最大高度5M19YesmaxWidth设置元素的最大宽度5M19YesminHeight设置元素的最小高度5M19YesminWidth设置元素的最小宽度5M19Yesoverflow规定如何处理不适合元素盒的内容419YesverticalAlign设置对元素中的内容进行垂直排列41NoYesvisibility设置元素是否可见419Yeswidth设置元素的宽度419Yes

List 属性

属性描述IEFOW3ClistStyle在一行设置列表的所有属性419YeslistStyleImage把图像设置为列表项标记41NoYeslistStylePosition改变列表项标记的位置419YeslistStyleType设置列表项标记的类型419Yes

Positioning 属性

属性描述IEFOW3Cbottom设置元素的底边缘距离父元素底边缘的之上或之下的距离519Yesleft置元素的左边缘距离父元素左边缘的左边或右边的距离419Yesposition把元素放置在static, relative, absolute 或 fixed 的位置419Yesright置元素的右边缘距离父元素右边缘的左边或右边的距离519Yestop设置元素的顶边缘距离父元素顶边缘的之上或之下的距离419YeszIndex设置元素的堆叠次序419Yes

Printing 属性

属性描述IEFOW3Corphans设置段落留到页面底部的最小行数5M19Yespage设置显示某元素时使用的页面类型5M19YespageBreakAfter设置某元素之后的分页行为419YespageBreakBefore设置某元素之前的分页行为419YespageBreakInside设置某元素内部的分页行为5M19Yessize设置页面的方向和尺寸 19Yeswidows设置段落必须留到页面顶部的最小行数5M19Yes

Scrollbar 属性 (IE-only)

属性描述IEFOW3Cscrollbar3dLightColor设置箭头和滚动条左侧和顶边的颜色5WNoNoNoscrollbarArrowColor设置滚动条上的箭头颜色5WNoNoNoscrollbarBaseColor设置滚动条的底色5WNoNoNoscrollbarDarkShadowColor设置箭头和滚动条右侧和底边的颜色5WNoNoNoscrollbarFaceColor设置滚动条的表色5WNoNoNoscrollbarHighlightColor设置箭头和滚动条左侧和顶边的颜色，以及滚动条的背景5WNoNoNoscrollbarShadowColor设置箭头和滚动条右侧和底边的颜色5WNoNoNoscrollbarTrackColor设置滚动条的背景色5WNoNoNo

Table 属性

属性描述IEFOW3CborderCollapse设置表格边框是否合并为单边框，或者像在标准的HTML中那样分离。519YesborderSpacing设置分隔单元格边框的距离5M19YescaptionSide设置表格标题的位置5MNoNoYesemptyCells设置是否显示表格中的空单元格5M19YestableLayout设置用来显示表格单元格、行以及列的算法5NoNoYes

Text 属性

属性描述IEFOW3Ccolor设置文本的颜色419Yesfont在一行设置所有的字体属性419YesfontFamily设置元素的字体系列。419YesfontSize设置元素的字体大小。419YesfontSizeAdjust设置/调整文本的尺寸5M1NoYesfontStretch设置如何紧缩或伸展字体5MNoNoYesfontStyle设置元素的字体样式419YesfontVariant用小型大写字母字体来显示文本419YesfontWeight设置字体的粗细419YesletterSpacing设置字符间距419YeslineHeight设置行间距419Yesquotes设置在文本中使用哪种引号5M1 YestextAlign排列文本419YestextDecoration设置文本的修饰419YestextIndent缩紧首行的文本419YestextShadow设置文本的阴影效果5M1 YestextTransform对文本设置大写效果419YesunicodeBidi 51 YeswhiteSpace设置如何设置文本中的折行和空白符419YeswordSpacing设置文本中的词间距619Yes

标准属性

属性描述IEFOW3Cdir设置或返回文本的方向519Yeslang设置或返回元素的语言代码519Yestitle设置或返回元素的咨询性的标题519Yes

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 对象，其属性是只读的。