繁體中文当前位置: 首页 > 网络学院 > 客户端脚本教程 > HTML DOM > DOM Style 对象
HTML DOM 中的 DOM Style 对象
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-03-01 浏览: 758 ::
收藏到网摘: n/a
Style 对象
The Style object represents an individual style statement. The Style object can be accessed from the document or from the elements to which that style is applied.
Style对象可代表一个单独的style声明。Style对象可被文档或是支持样式的元素所访问到。
Syntax for using the Style object properties:
使用Style对象属性的语法：
document.getElementById("id").style.property="value" |
The Style object property categories:
Style对象的属性分类：
IE: Internet Explorer, M: Mac IE only, W: Windows IE only, F: Firefox, N: Netscape, W3C: World Wide Web Consortium (Internet Standard).
Background properties
背景属性
| Property 属性 | Description 描述 | Values 值 | IE | F | N |
|---|---|---|---|---|---|
| background | Sets or returns all background properties in one 设置或返回background属性 | backgroundColor backgroundImage backgroundRepeat backgroundAttachment backgroundPosition | 4 | 1 | 6 |
| backgroundAttachment | Sets or returns whether a background image is fixed or scrolls with the rest of the page 设置或返回背景图片的表现形式 | scroll fixed | 4 | 1 | 6 |
| backgroundColor | Sets or returns the background color of the element 设置或返回背景颜色 | color-rgb color-hex color-name transparent | 4 | 1 | 6 |
| backgroundImage | Sets or returns the background image of the element 设置或返回元素的背景图 | url("URL") none | 4 | 1 | 6 |
| backgroundPosition | Sets or returns the starting position of the background image 设置或返回背景图片的开始位置 | top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos | 4 | 1 | 6 |
| backgroundPositionX | Sets or returns the x-coordinates of the backgroundPosition property 设置或返回背景位置的X坐标 | left center right x-% x-pos | 4 | ||
| backgroundPositionY | Sets or returns the y-coordinates of the backgroundPosition property 设置或返回背景位置的Y坐标 | top center bottom y-% y-pos | 4 | ||
| backgroundRepeat | Sets or returns if/how a background image will be repeated 设置或返回背景是否重复显示，怎样重复显示 | repeat repeat-x repeat-y no-repeat | 4 | 1 | 6 |
Border and Margin properties
边框和边界属性
| Property 属性 | Description 描述 | Values 值 | IE | F | N |
|---|---|---|---|---|---|
| border | Sets or returns all properties for the four borders in one 设置或返回所有四边的属性 | borderWidth borderStyle borderColor | 4 | 1 | 6 |
| borderBottom | Sets or returns all properties for the bottom border in one 设置或返回下边框的所有属性 | borderWidth borderStyle borderColor | 4 | 1 | 6 |
| borderLeft | Sets or returns all property for the left border in one 设置或获取对象左边框的属性。 | borderWidth borderStyle borderColor | 4 | 1 | 6 |
| borderRight | Sets or returns all property for the right border in one 设置或获取对象右边框的属性。 | borderWidth borderStyle borderColor | 4 | 1 | 6 |
| borderTop | Sets or returns all property for the top border in one 设置或获取对象上边框的属性。 | borderWidth borderStyle borderColor | 4 | 1 | 6 |
| borderBottomColor | Sets or returns the color of the bottom border 设置或获取对象下边框的属性。 | borderColor | 4 | 1 | 6 |
| borderLeftColor | Sets or returns the color of the left border 设置或获取对象左边框的颜色。 | borderColor | 4 | 1 | 6 |
| borderRightColor | Sets or returns the color of the right border 设置或获取对象右边框的颜色。 | borderColor | 4 | 1 | 6 |
| borderTopColor | Sets or returns the color of the top border 设置或获取对象上边框的颜色。 | borderColor | 4 | 1 | 6 |
| borderBottomStyle | Sets or returns the style of the bottom border 设置或获取对象下边框的样式。 | borderStyle | 4 | 1 | 6 |
| borderLeftStyle | Sets or returns the style of the left border 设置或获取对象左边框的样式。 | borderStyle | 4 | 1 | 6 |
| borderRightStyle | Sets or returns the style of the right border 设置或获取对象右边框的样式。 | borderStyle | 4 | 1 | 6 |
| borderTopStyle | Sets or returns the style of the top border 设置或获取对象上边框的样式。 | borderStyle | 4 | 1 | 6 |
| borderBottomWidth | Sets or returns the width of the bottom border 设置或获取对象下边框的宽度。 | borderWidth | 4 | 1 | 6 |
| borderLeftWidth | Sets or returns the width of the left border 设置或获取对象左边框的宽度。 | borderWidth | 4 | 1 | 6 |
| borderRightWidth | Sets or returns the width of the right border 设置或获取对象右边框的宽度。 | borderWidth | 4 | 1 | 6 |
| borderTopWidth | Sets or returns the width of the top border 设置或获取对象上边框的宽度。 | borderWidth | 4 | 1 | 6 |
| borderColor | Sets or returns the color of all four borders (can have up to four colors) 设置或获取对象的边框颜色。 | color-rgb color-hex color-name | 4 | 1 | 6 |
| borderStyle | Sets or returns the style of all four borders 设置或获取对象上下左右边框的样式。 | none dotted dashed solid double groove ridge inset outset | 4 | 1 | 6 |
| borderWidth | Sets or returns the width of all four borders 设置或获取对象上下左右边框的宽度。 | thin medium thick length | 4 | 1 | 6 |
| margin | Sets or returns the top, right, bottom, and left margins of the element 设置或获取对象的上下左右边距。 | marginTop marginRight marginBottom marginLeft | 4 | 1 | 6 |
| marginBottom | Sets or returns the bottom margin of the element 设置或获取对象的下边距宽度。 | auto length % | 4 | 1 | 6 |
| marginLeft | Sets or returns the left margin of the element 设置或获取对象的左边距宽度。 | auto length % | 4 | 1 | 6 |
| marginRight | Sets or returns the right margin of the element 设置或获取对象的右边距宽度。 | auto length % | 4 | 1 | 6 |
| marginTop | Sets or returns the top margin of the element 设置或获取对象的上边距宽度。 | auto length % | 4 | 1 | 6 |
| outline | Sets or returns the color, style, and width of the outline around the element 设置或获取围绕元素的颜色，样式和边框宽度 | outlineColor outlineStyle outlineWidth | 5M | 1 | 6 |
| outlineColor | Sets or returns the color of the outline around the element 设置或返回围绕元素的颜色 | color-rgb color-hex color-name invert | 5M | 1 | 6 |
| outlineStyle | Sets or returns the style of the outline around the element 设置或返回围绕元素的样式 | none dotted dashed solid double groove ridge inset outset | 5M | 1 | 6 |
| outlineWidth | Sets or returns the width of the outline around the element 设置或返回围绕元素的边框宽度 | thin medium thick length | 5M | 1 | 6 |
| padding | Sets or returns the top, right, bottom, and left padding of the element 设置或获取要在对象和其边距或若存在的边框的话就是对象和其边框之间要插入的全部空间。 | paddingTop paddingRight paddingBottom paddingLeft | 4 | 1 | 6 |
| paddingBottom | Sets or returns the bottom padding of the element 设置或获取要在对象下边框和内容之间插入的空间总量。 | length % | 4 | 1 | 6 |
| paddingLeft | Sets or returns the left padding of the element 设置或获取要在对象左边框和内容之间插入的空间总量。 | length % | 4 | 1 | 6 |
| paddingRight | Sets or returns the right padding of the element 设置或获取要在对象右边框和内容之间插入的空间总量。 | length % | 4 | 1 | 6 |
| paddingTop | Sets or returns the top padding of the element 设置或获取对象上边框和内容之间插入的空间总量。 | length % | 4 | 1 | 6 |
Layout properties
布局属性
| Property 属性 | Description 描述 | Values 值 | IE | F | N |
|---|---|---|---|---|---|
| clear | Sets or returns which sides of an element other floating elements are not allowed 设置或获取对象是否允许在其左侧、右侧或两边放置浮动对象，以防下段文本显示在浮动对象上。 | left right both none | 4 | 1 | 6 |
| clip | Sets or returns the shape of an element. What if an image is larger than the element it goes inside? - This property lets you specify the dimensions of an element that should be visible, and the element is clipped into this shape, and displayed 设置或获取定位对象的哪个部分可见。 | auto rect(top right bottom left) | 4 | 1 | 6 |
| clipBottom | Returns the bottom coordinate of the clipping region | auto length | 5W | 1 | 6 |
| clipLeft | Returns the left coordinate of the clipping region | auto length | 5W | 1 | 6 |
| clipRight | Returns the right coordinate of the clipping region | auto length | 5W | 1 | 6 |
| clipTop | Returns the top coordinate of the clipping region | auto length | 5W | 1 | 6 |
| content | Sets or returns meta-information 设置或返回meta信息 | 5M | 1 | 6 | |
| counterIncrement | 5M | 1 | 6 | ||
| counterReset | 5M | 1 | 6 | ||
| cssFloat | 5M | 1 | 6 | ||
| cursor | Sets or returns the type of cursor to be displayed when the mouse pointer moves over the element 设置或获取当鼠标指针指向对象时所使用的鼠标指针。 | auto crosshair default hand pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help all-scroll (IE6+) col-resize (IE6+) no-drop (IE6+) not-allowed (IE6+) pointer (IE6+) progress (IE6+) row-resize (IE6+) url(uri) (IE6+) vertical-text (IE6+) | 4 | 1 | 6 |
| direction | Sets or returns the reading order 设置或获取对象的阅读顺序。 | ltr rtl | 5 | 1 | 6 |
| display | Sets or returns how/if an element is displayed 设置或获取对象是否要渲染。 | block none inline inline-block list-item (IE6+) table-header-group table-footer-group | 4 | 1 | 6 |
| filter | Sets or returns the filter/filters applied to the element 设置或返回元素是否需要应用滤镜 | 4W | |||
| layoutGrid | 5W | ||||
| layoutGridChar | 5W | ||||
| layoutGridLine | 5W | ||||
| layoutGridMode | 5W | ||||
| layoutGridType | 5W | ||||
| markerOffset | 5M | 1 | 6 | ||
| marks | 5M | 1 | 6 | ||
| maxHeight | 5M | 1 | 6 | ||
| maxWidth | 5M | 1 | 6 | ||
| minHeight | 6 | 1 | 6 | ||
| minWidth | 5M | 1 | 6 | ||
| MozOpacity | 1 | 6 | |||
| overflow | 4 | 1 | 6 | ||
| overflowX | 5W | 1 | 6 | ||
| overflowY | 5W | 1 | 6 | ||
| styleFloat | 4 | ||||
| verticalAlign | 4 | 1 | 6 | ||
| visibility | 4 | 1 | 6 | ||
| width | 4 | 1 | 6 | ||
| zoom | 5W |
List properties
列表属性
| Property 属性 | Description 描述 | Values 值 | IE | F | N |
|---|---|---|---|---|---|
| listStyle | Sets or returns all the properties for a list in one 设置或获取对象最多三个独立的 listStyle 属性。 | listStyleType listStylePosition listStyleImage | 4 | 1 | 6 |
| listStyleImage | Sets or returns the value of the image that is the list-item marker 获取要为对象应用的列表项目符号的图像。 | none url(url) | 4 | 1 | 6 |
| listStylePosition | Sets or returns where the list-item marker is placed in the list 获取相对于对象内容如何绘制项目符号。 | outside inside | 4 | 1 | 6 |
| listStyleType | Sets or returns the type of the list-item marker 获取对象预定义的项目符号类型。 | disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none | 4 | 1 | 6 |
Misc properties
混合属性
| Property 属性 | Description 描述 | Values 值 | IE | F | N |
|---|---|---|---|---|---|
| accelerator | Sets or returns a Boolean value indicating whether the element contains an accelerator key 设置或获取表明对象是否包含快捷键的字符串。 | false true | 5W | ||
| behavior | 5W | ||||
| cssText | 4 | 1 | 6 | ||
| imeMode | 5W |
Positioning properties
位置属性
| Property 属性 | Description 描述 | Values 值 | IE | F | N |
|---|---|---|---|---|---|
| bottom | 5 | 1 | 6 | ||
| height | 4 | 1 | 6 | ||
| left | 4 | 1 | 6 | ||
| pixelBottom | 4 | ||||
| pixelHeight | 4 | ||||
| pixelLeft | 4 | ||||
| pixelRight | 4 | ||||
| pixelTop | 4 | ||||
| pixelWidth | 4 | ||||
| posBottom | 4 | ||||
| posHeight | 4 | ||||
| posLeft | 4 | ||||
| posRight | 4 | ||||
| posTop | 4 | ||||
| posWidth | 4 | ||||
| position | 4 | 1 | 6 | ||
| right | 5 | 1 | 6 | ||
| top | 4 | 1 | 6 | ||
| width | 4 | 1 | 6 | ||
| zIndex | 4 | 1 | 6 |
Printing properties
输出属性
| Property 属性 | Description 描述 | Values 值 | IE | F | N |
|---|---|---|---|---|---|
| orphans | 5M | 1 | 6 | ||
| widows | 5M | 1 | 6 | ||
| page | 5M | 1 | 6 | ||
| pageBreakAfter | 4 | 1 | 6 | ||
| pageBreakBefore | 4 | 1 | 6 | ||
| pageBreakInside | 5M | 1 | 6 | ||
| size | 1 | 6 |
Scrollbar properties
滚动条属性
| Property 属性 | Description 描述 | Values 值 | IE | F | N |
|---|---|---|---|---|---|
| scrollbar3dLightColor | 5W | ||||
| scrollbarArrowColor | 5W | ||||
| scrollbarBaseColor | 5W | ||||
| scrollbarDarkShadowColor | 5W | ||||
| scrollbarFaceColor | 5W | ||||
| scrollbarHighlightColor | 5W | ||||
| scrollbarShadowColor | 5W | ||||
| scrollbarTrackColor | 5W |
Table properties
表格属性
| Property 属性 | Description 描述 | Values 值 | IE | F | N |
|---|---|---|---|---|---|
| borderCollapse | 5M | 1 | 6 | ||
| borderSpacing | 5M | 1 | 6 | ||
| captionSide | 5M | 1 | 6 | ||
| emptyCells | 5M | 1 | 6 | ||
| tableLayout | 5 | 1 | 6 |
Text properties
文本属性
| Property 属性 | Description 描述 | Values 值 | IE | F | N |
|---|---|---|---|---|---|
| color | 4 | 1 | 6 | ||
| font | 4 | 1 | 6 | ||
| fontFamily | 4 | 1 | 6 | ||
| fontSize | 4 | 1 | 6 | ||
| fontSizeAdjust | 5M | 1 | 6 | ||
| fontStretch | 5M | 1 | 6 | ||
| fontStyle | 4 | 1 | 6 | ||
| fontVariant | 4 | 1 | 6 | ||
| fontWeight | 4 | 1 | 6 | ||
| letterSpacing | 4 | 1 | 6 | ||
| lineBreak | 5 | ||||
| lineHeight | 4 | 1 | 6 | ||
| quotes | 5M | 1 | 6 | ||
| rubyAlign | 5 | ||||
| rubyOverhang | 5 | ||||
| rubyPosition | 5 | ||||
| textAlign | 4 | 1 | 6 | ||
| textAlignLast | 5 | ||||
| textAutospace | 5W | ||||
| textDecoration | 4 | 1 | 6 | ||
| textDecorationBlink | 4 | ||||
| textDecorationLineThrough | 4 | ||||
| textDecorationLineNone | 4 | ||||
| textDecorationLineOverline | 4 | ||||
| textDecorationLineUnderline | 4 | ||||
| textIndent | 4 | 1 | 6 | ||
| textJustify | 5 | ||||
| textJustifyTrim | 5 | ||||
| textKashidaSpace | 5 | ||||
| textOverflow | 6W | ||||
| textShadow | 5M | 1 | 6 | ||
| textTransform | 4 | 1 | 6 | ||
| textUnderlinePosition | 5 | ||||
| unicodeBidi | 5 | 1 | 6 | ||
| whiteSpace | 4 | 1 | 6 | ||
| wordBreak | 5W | ||||
| wordSpacing | 6 | 1 | 6 | ||
| wordWrap |
评论 (0) All
