DOM2 和 DOM3

样式

有三种：通过<link/>包含外部样式表文件、使用<style/>元素定义嵌入式样式、使用style特性定义针对特定元素的样式。

i>访问样式表

任何支持style特性的HTML元素在js中都有一个对应的style属性。

这个style对象是CSSStyleDeclaration的实例，包含着通过HTML的style特性指定的所有样式信息，但不包含其它两种。
在style特性中指定的任何CSS属性都将表现为这个style对象的相应属性。
对于有短横线的css属性名，必须将其转换成骆驼峰大小写形式，才能通过Javscript来访问。
多数都可以转换，其中少数不能： float ===> cssFloat （Firefox、 Safari、 Opera 和 Chrome 都支持这个属性），而IE支持styleFloat
在标准模式下，所有度量值都必须带一个度量单位20px，混杂模式下则不带单位。20
如果没有为元素设置style特性，style对象中会带有一些不能准确的反映这个元素的一些默认值。

ii>cssText属性

style对象的cssText属性。读取模式：可以得到元素的style特性中的css代码。写入模式：会完全重写元素的style特性的值。设置 cssText 是为元素应用多项变化最快捷的方式。

ii>计算样式

所有的计算样式都是只读的
在默认情况下，有的浏览器将 visibility 属性设置为”visible”，而有的浏览器则将其设置为”inherit”。如果需要某个元素具有某个特定的默认值，应该手工在样式中指定该值。
包含当前元素的所有计算样式：
非IE –> getComputedStyle(取得计算样式的元素， null 或伪元素字符串):返回一个CSSStyleDeclaration对象（与style属性的类型相同）。
IE —> currentStyle属性：是CSSStyleDeclaration 的实例。

元素大小

i> 偏移量

offsetHeight ：元素在垂直方向上占用的空间大小（像素）。包括元素的高度、（可见的）水平滚动条的高度、上边框和下边框的高度。
offsetWidth :　略（同上）
offsetLeft ：元素的左外边框至包含元素的左内边框之间的像素距离。包含元素的引用保存在offsetParent属性中。
offsetTop ：略（同上） offsetParent 不一定与 parentNode 的值相等。

所有这些偏移量属性都是只读的，而且每次访问它们都需要重新计算。因此，应该尽量避免重复访问这些属性；如果需要重复使用其中某些属性的值，可以将它们保存在局部变量中，以提高性能。

得到一个元素在页面上的偏移量。
只能针对简单的css布局页面能够得到精确的值。对于表格和框架，由于不同浏览器实现这些元素的方式不同，得到的值就不太精确。
function getElementLeft( element ){
  var actualLeft = element.offsetLeft;
  var current = element.offsetParent;

  while( current !== null ){
     actualLeft += current.offsetLeft;
     current =  element.offsetParent;
  }

  return actualLeft;
}

i>客户区大小

元素客户区大小指的是元素的内容以及其内边距所占据的空间大小(不包含滚动条的宽度大小)。 clientWidth 和 clientHeight

i>滚动大小

除了<html>之外的其他元素，需要通过 css 的 overflow属性 进行设置才行。

scrollHeight (scrollWidth)：在没有滚动条的情况下，元素内容的总高度(宽度)。
scrollLeft (scrollTop) ：被隐藏在内容区域左侧（上方）的像素数。通过设置这个可以改变元素的滚动位置。

scrollWidth 和 scrollHeight 主要用于确定元素内容的实际大小。例如，通常认为元素是在 Web 浏览器的视口中滚动的元素（IE6 之前版本运行在混杂模式下时是元素）。因此，带有垂直滚动条的页面总高度就是 document.documentElement.scrollHeight。

对于不包含滚动条的页面而言， scrollWidth 和 scrollHeight 与 clientWidth 和clientHeight 之间的关系并不十分清晰。在这种情况下，基于document.documentElement 查看这些属性会在不同浏览器间发现一些不一致性问题，如下所述。

Firefox 中这两组属性始终都是相等的，但大小代表的是文档内容区域的实际尺寸，而非视口的尺寸。
Opera、 Safari 3.1 及更高版本、 Chrome 中的这两组属性是有差别的，其中 scrollWidth 和scrollHeight 等于视口大小，而 clientWidth 和 clientHeight 等于文档内容区域的大小。
IE（在标准模式）中的这两组属性不相等，其中 scrollWidth 和 scrollHeight 等于文档内容区域的大小，而 clientWidth 和 clientHeight 等于视口大小。

在确定文档的总高度时（包括基于视口的最小高度时），必须取得 scrollWidth/clientWidth 和scrollHeight/clientHeight 中的最大值，才能保证在跨浏览器的环境下得到精确的结果。

1
2
3

在IE混杂模式下，document.body代替document.documentElement
var docHeiht = Math.max( document.documentElement.scrollHeight, document.documentElement.clientHeight );
var docWidth = Math.max( document.documentElement.scrollWidth, document.documentElement.clientWidth );

通过 scrollLeft 和 scrollTop 属性既可以确定元素当前滚动的状态，也可以设置元素的滚动位置。在元素尚未被滚动时，这两个属性的值都等于 0。如果元素被垂直滚动了，那么 scrollTop 的值会大于 0，且表示元素上方不可见内容的像素高度。如果元素被水平滚动了，那么 scrollLeft 的值会大于 0，且表示元素左侧不可见内容的像素宽度。这两个属性都是可以设置的，因此将元素的scrollLeft 和 scrollTop 设置为 0，就可以重置元素的滚动位置。下面这个函数会检测元素是否位于顶部，如果不是就将其回滚到顶部。

样式