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 相对文档的垂直座标

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