Javascript高级程序设计第十二章

第12章

1.任何支持style特性的HTML元素在Javascript中都有一个对应的style的属性。这个style对象是CSSSstyleDeclaration的实例，包含着通过HTML的style特性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式。对于短划线的CSS属性名，必须将其转换为驼峰大小写形式。但有一个属性特性，在IE支持styleFloat，在其他浏览器上支持cssFloat；

2.无论在哪个浏览器中，最重要的一条是记住所有计算的样式都是只读的

除IE<9浏览器：计算的样式

document.defaultView,提供了getComputedStyle()方法。这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如：after）。如果不需要伪元素信息，第二个参数可以是null。getComputedStyle()方法返回一个CSSStyleDeclaration对象（与style属性的类型相同），其中包含当前元素的所有的样式（border属性有点特殊，有些不返回值）。

<pre name="code" class="javascript">var myDiv = document.getElementById("myDiv");

var computedStyle = document.defaultView.getComputedStyle(myDiv,null);alert(computedStyle.height);

IE<9浏览器：在IE中，每个具有style属性的元素还有一个currentStyle属性。

var myDiv = document.getElementById("myDiv");var computedStyle = myDiv.currentStyle;alert(computedStyle.height);

3.元素大小

①偏移量：包括元素在屏幕上占用的所有可见的空间。元素的可见大小由高度、宽度决定，包括所有内边距、滚动条、边框大小（注意不包括外边距）

offsetHeight:元素在垂直方向上占用的空间大小。元素的高度 + （可见的）水平滚动条的高度 + 上下边框的高度和

offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离

offsetParent:此属性不一定与parentNode的值相等。例如，<td>元素的offsetParent作为其祖先元素的table元素，因为table是在DOM层次中距td最近的一个具有大小的元素。

获取某个元素的左和上偏移量，只是一个基本准确的大概的值：

 function getElementLeft(element){            var actualLeft = element.offsetLeft;            var current = element.offsetParent;                    while (current !== null){                        actualLeft += current.offsetLeft;                current = current.offsetParent;            }                    return actualLeft;        }            function getElementTop(element){            var actualTop = element.offsetTop;            var current = element.offsetParent;                    while (current !== null){                        actualTop += current.offsetTop;                current = current.offsetParent;            }                    return actualTop;        }

2.客户区大小：指的是元素内容及其内边距所占据的空间大小（滚动条占用的空间不计算在内），获取clientWidth和clientHeight

function getViewPort(){    if(document.compatMode == "BackCompat"){    return {      width: document.body.clientWidth,      height: document.body.clientHeight    }  }else {    return {      width: document.documentElement.clientWIdth,      height: document.documentElement.clientHeight         }  }}

3.滚动大小：指的是包含滚动内容的元素的大小

scroolHeight:在没有滚动条的情况下，元素内容（不包括内边距）的总高度

scrollLeft: 被隐藏在内容区域左侧的像素数。通过设置可以改变元素的滚动位置。

但实际上，对于不包含滚动条的页面中，scrollHeight和clientHeight并不和它们的定义一致

Firefox:这两组属性始终相等，等于文档内容区域的实际尺寸，而非视口尺寸

Opera、Safari、chrome中：scrollWidth和scrollHeight等于视口大小，而clientWidth和clientHeight等于文档内容区域的大小

IE（在标准模式）中：scrollWidth和scrollHeight等于文档内容区域的大小，而clientWidth和clientHeight等于视口大小

看完后是否觉得很乱，那就对了，我也是这么觉得的。

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

var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElemnt.clientHeight);var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);

注意，对于运行在混杂模式下的IE，则需要用document.body代替document.documentElement