12javascript操作CSS

1改变CSS样式
document.getElementById("id").className="className";


2改变单个属性
document.getElementById("id").style.backgroundImage="url(../images/back.jpg)";
注意：路径要用url("...")
还有当CSS中有像font-size这样的在javascript中操作应该写成fontSize，采用驼峰式第一个单词的字符小写，第二个单词首个字符大写。例如：
document.getElementById("ye").style.fontSize="20pt";




JAVASCRIPT: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>那样的输出流。


3JavaScript  CSS Style属性对照表
[第一个参数为CSS里的写法,第二个参数为javascript里的写法]


盒子标签和属性对照 
CSS语法 (不区分大小写) JavaScript语法 (区分大小写) 
border  border 
border-bottom  borderBottom 
border-bottom-color  borderBottomColor 
border-bottom-style  borderBottomStyle 
border-bottom-width  borderBottomWidth 
border-color  borderColor 
border-left  borderLeft 
border-left-color  borderLeftColor 
border-left-style  borderLeftStyle 
border-left-width  borderLeftWidth 
border-right  borderRight 
border-right-color  borderRightColor 
border-right-style  borderRightStyle 
border-right-width  borderRightWidth 
border-style  borderStyle 
border-top  borderTop 
border-top-color  borderTopColor 
border-top-style  borderTopStyle 
border-top-width  borderTopWidth 
border-width  borderWidth 
clear  clear 
float  floatStyle 
margin  margin 
margin-bottom  marginBottom 
margin-left  marginLeft 
margin-right  marginRight 
margin-top marginTop 
padding  padding 
padding-bottom  paddingBottom 
padding-left  paddingLeft 
padding-right  paddingRight 
padding-top  paddingTop 
border-style  borderStyle


border-style取值：
none 定义无边框。
hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。




颜色和背景标签和属性对照 
CSS语法 (不区分大小写) JavaScript语法 (区分大小写) 
background  background 
background-attachment  backgroundAttachment 
background-color  backgroundColor 
background-image  backgroundImage 
background-position  backgroundPosition 
background-repeat  backgroundRepeat 
color  color 改变字体颜色


样式标签和属性对照 
CSS语法 (不区分大小写) JavaScript语法 (区分大小写) 
visibility   visibility
display   display 
list-style-type   listStyleType 
list-style-image  listStyleImage 
list-style-position  listStylePosition 
list-style  listStyle 
white-space  whiteSpace 


文字样式标签和属性对照 
CSS语法 (不区分大小写) JavaScript语法 (区分大小写) 
font  font 
font-family  fontFamily 
font-size  fontSize 
font-style  fontStyle 
font-variant  fontVariant 
font-weight  fontWeight 


文本标签和属性对照 
CSS语法 (不区分大小写) JavaScript语法 (区分大小写) 
letter-spacing  letterSpacing 
line-break  lineBreak 
line-height  lineHeight 
text-align  textAlign 
text-decoration  textDecoration 
text-indent  textIndent 
text-justify  textJustify 
text-transform  textTransform 
vertical-align  verticalAlign


z属性
CSS语法 (不区分大小写) JavaScript语法 (区分大小写) 
z-index    zIndex
默认元素的z-index的值为0


元素的style属性中的z-index大于0的值都要高于css中z-index的取值。例如：
style="z-index:100"高于css{z-index:10000}


****************
元素的颜色代码是小写的,不论我们赋值时是否使用大写，所以我们在比较元素的颜色代码是否为某个颜色时，采用小写。如果采用大写则不会相等。
if(element.style.backgroundColor=="#0099ff")
****************
边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。
左边距属性(margin-left),这个属性用来设定左边距的宽度。示例如下：
.d1{margin-left:1px}


右边距属性(margin-right)
.d1 {margin-right:10px}


上边距属性(margin-top),这个属性用来设定上边距的宽度。示例如下：
.d1 {margin-top:10px}


下边距属性(margin-bottom)
.d1{margin-bottom:10px}


边距属性(margin),在一个声明中设置所有外边距属性。该属性可以有1到4个值。如：
margin:10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px


间隙属性(padding)是用来设置元素内容到元素边界的距离。
左间隙属性(padding-left),这个属性用来设定左间隙的宽度。示例如下：
.d1{padding-left:1px}


右间隙属性(padding-right)这个属性用来设定右间隙的宽度。示例如下：
.d1 {padding-right:1px}


上间隙属性(padding-top)，这个属性用来设定上间隙的宽度。示例如下：
.d1 {padding-top1px}


下间隙属性(margin-bottom)
.d1{padding-bottom:1px}




padding这个属性是设定间隙宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右间隙属性。
.d1 {padding:1px 2px 3px 4px}


**********************
offsetLeft是指的以自段坐标为基本的到父窗口的左边距,可以看出与left是一样的,但不同的就是一个是以父对象为坐标基准,一个是以自身坐标为基准的.两者的结果是一样的.
两者中是offsetLeft返回的是数值,而left则是文本,后边可能会跟上px这样的单位。
offsetTop也类似。




css的postion取值：
absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。


fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。


relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。


static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。


inherit 规定应该从父元素继承 position 属性的值。






scrollHeight: 获取对象的滚动高度。  
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
***********************