14javascript操作style对象

Style 对象

Style 对象代表一个单独的样式声明。可被文档或是支持样式的元素所访问到。

使用Style 对象属性的语法：

document.getElementById("id").style.property="值"Style 对象的属性：

背景 

边框和边距 

布局 

列表 

定位 

打印 

滚动条 

表格 

文本 

标准 

Background（背景） 属性

属性 描述 

background 在一行中设置所有的背景属性 

backgroundAttachment 设置背景图像是否固定或随页面滚动 

backgroundColor 设置元素的背景颜色 

backgroundImage 设置元素的背景图像 

backgroundPosition 设置背景图像的开始位置 

backgroundPositionX 设置或返回背景位置的X坐标 

backgroundPositionY 设置或返回背景位置的Y坐标 

backgroundRepeat 设置或返回背景是否重复显示，怎样重复显示 

Border（边框） 和 Margin（边距 ） 属性

属性 描述 

border 在一行设置四个边框的所有属性style.border="1px solid red" 

borderBottom 在一行设置底边框的所有属性 

borderLeft 在一行设置左边框的所有属性 

borderRight 在一行设置右边框的所有属性 

borderTop 在一行设置顶边框的所有属性 

borderBottomColor 设置底边框的颜色 

borderLeftColor 设置左边框的颜色 

borderRightColor 设置右边框的颜色 

borderTopColor 设置顶边框的颜色 

borderBottomStyle 设置底边框的样式 

borderLeftStyle 设置左边框的样式 

borderRightStyle 设置右边框的样式 

borderTopStyle 设置顶边框的样式 

borderBottomWidth 设置底边框的宽度 

borderLeftWidth 设置左边框的宽度 

borderRightWidth 设置右边框的宽度 

borderTopWidth 设置顶边框的宽度 

borderColor 设置所有四个边框的颜色 (可设置四种颜色) 

borderStyle 设置所有四个边框的样式 (可设置四种样式) 

borderWidth 设置所有四条边框的宽度 (可设置四种宽度) 

margin 设置元素的边距 (可设置四个值) 

marginBottom 设置元素的底边距 

marginLeft 设置元素的左边距 

marginRight 设置元素的右边距 

marginTop 设置元素的顶边距 

outline 设置或获取围绕元素的颜色，样式和边框宽度（IE不支持此属性） 

outlineColor 设置围绕元素的轮廓颜色（IE不支持此属性） 

outlineStyle 设置围绕元素的轮廓样式（IE不支持此属性） 

outlineWidth 设置围绕元素的轮廓宽度（IE不支持此属性） 

padding 设置元素的填充 (可设置四个值) 

paddingBottom 设置元素的下填充 

paddingLeft 设置元素的左填充 

paddingRight 设置元素的右填充 

paddingTop 设置元素的顶填充 

Layout（布局） 属性

属性 描述 

clear 设置或获取对象是否允许在其左侧、右侧或两边放置浮动对象，以防下段文本显示在浮动对象上。 

clip 设置或获取定位对象的哪个部分可见。 

content 设置元信息（IE不支持此属性） 

counterIncrement 设置其后是正数的计数器名称的列表。其中整数指示每当元素出现时计数器的增量。默认是1（IE不支持此属性）。 

counterReset 设置其后是正数的计数器名称的列表。其中整数指示每当元素出现时计数器被设置的值。默认是0（IE不支持此属性）。 

cssFloat 设置图像或文本将出现（浮动）在另一元素中的何处（IE不支持此属性）。 

cursor 设置或获取当鼠标指针指向对象时所使用的鼠标指针类型。 

direction 设置元素的文本方向 

display 设置元素如何被显示 

height 设置元素的高度 

width 设置元素的宽度 

markerOffset 设置marker box的principal box距离其最近的边框边缘的距离（IE不支持此属性） 

marks 设置是否cross marks或crop marks应仅仅被呈现于page box边缘之外（IE不支持此属性） 

maxHeight 设置元素的最大高度（IE不支持此属性） 

maxWidth 设置元素的最大宽度（IE不支持此属性） 

minHeight 设置元素的最小高度（IE不支持此属性） 

minWidth 设置元素的最小宽度（IE不支持此属性） 

overflow 规定如何处理不适合元素盒的内容,用于设置滚动条，

overflow-x水平方向内容溢出时的设置

overflow-y垂直方向内容溢出时的设置

以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。

设置为scroll会自动地在一个元素中放置滚动条。

设置overflow为auto，在这种情况下，只有当内容实际超出了空间时，才会显示滚动条。

设置overflow为hidden，在这种情况下，不会有滚动条。

verticalAlign 设置对元素中的内容进行垂直排列 

visibility 设置元素是否可见 

*********************

style 中visibility和display之间的区别：

大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。

visibility属性用来确定元素是显示还是隐藏的，这用visibility="visible|hidden"来表示（visible表示显示，hidden表示隐藏）。当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。

注意到，当元素被隐藏之后，就不能再接收到其它事件了、

display被设置：none，这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填。（此时应用display: none;的元素相当于消失，而visibility: hidden;则只表示隐藏，位置还在。

当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像<div>元素一样，它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block，使其可以像<div>一样工作。元素再次被显示出来。

将display设置为inline，将使其行为和元素inline一样---即使它是普通的块元素如<div>，它也将会被组合成像<span>那样的输出流。

float:left，设置div的内容向左排列。也可为right。

****************************

List（列表） 属性

属性 描述 

listStyle 在一行设置列表的所有属性 

listStyleImage 把图像设置为列表项标记 

listStylePosition 改变列表项标记的位置 

listStyleType 设置列表项标记的类型 

Positioning（定位） 属性

属性 描述 

bottom 设置元素的底边缘距离父元素底边缘的之上或之下的距离 ,我们要跟上单位px

left 设置元素的左边缘距离父元素左边缘的左边或右边的距离。我们要跟上单位px

right 设置元素的右边缘距离父元素右边缘的左边或右边的距离,我们要跟上单位px

top 设置元素的顶边缘距离父元素顶边缘的之上或之下的距离 ,我们要跟上单位px

position 把元素放置在static, relative, absolute 或 fixed 的位置 

zIndex 设置元素的堆叠次序 

元素的style属性中的z-index大于0的值都要高于css中z-index的取值。例如：

style="z-index:100"高于css{z-index:10000}

Printing（打印） 属性

属性 描述 

orphans 设置段落留到页面底部的最小行数 

page 设置显示某元素时使用的页面类型 

pageBreakAfter 设置某元素之后的分页行为 

pageBreakBefore 设置某元素之前的分页行为 

pageBreakInside 设置某元素内部的分页行为 

size 设置页面的方向和尺寸 

widows 设置段落必须留到页面顶部的最小行数 

Scrollbar（滚动条） 属性（仅IE有效）

属性 描述 

scrollbar3dLightColor 设置箭头和滚动条左侧和顶边的颜色 

scrollbarArrowColor 设置滚动条上的箭头颜色 

scrollbarBaseColor 设置滚动条的底色 

scrollbarDarkShadowColor 设置箭头和滚动条右侧和底边的颜色 

scrollbarFaceColor 设置滚动条的前景色 

scrollbarHighlightColor 设置箭头和滚动条左侧和顶边的颜色，以及滚动条的背景 

scrollbarShadowColor 设置箭头和滚动条右侧和底边的颜色 

scrollbarTrackColor 设置滚动条的背景色 

Table（表格） 属性

属性 描述 

borderCollapse 设置表格边框是否合并为单边框，或者像在标准的HTML中那样分离。 

borderSpacing 设置相邻单元格边框的距离（IE不支持此属性）。 

captionSide 设置表格标题的位置（IE不支持此属性）。 

emptyCells 设置是否显示表格中的空单元格（IE不支持此属性）。 

tableLayout 设置用来显示表格单元格、行以及列的算法 

Text（文本） 属性

属性 描述 

color 设置文本的颜色 

font 在一行设置所有的字体属性 

fontFamily 设置元素的字体系列。 

fontSize 设置元素的字体大小。 

fontSizeAdjust 设置/调整文本的尺寸（IE不支持此属性） 

fontStretch 设置如何紧缩或伸展字体（IE不支持此属性） 

fontStyle 设置元素的字体样式 (如设置斜体取值为italic)

fontVariant 用小型大写字母字体来显示文本 

fontWeight 设置字体的粗细 

letterSpacing 设置字符间距 

lineHeight 设置行间距 

quotes 设置在文本中使用哪种引号 

textAlign 排列文本 

textDecoration 设置文本的修饰 

textIndent 缩进首行的文本 

textShadow 设置文本的阴影效果 

textTransform 对文本设置大写效果 

whiteSpace 设置文本中的折行和空白符 

wordSpacing 设置文本中的词间距 

Standard（标准） 属性

属性 描述 

dir 设置或返回文本的方向。 

lang 设置或返回元素的语言代码。 

title 设置或返回元素的标题。