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 设置或返回元素的标题。