js第十二章元素大小

1.访问元素的样式

• 任何支持style特性的html元素在javaScript中都有一个style属性，style对象包含着通过html的style指定的所有样式
• 对于有分割线的css属性要将转化成驼峰式

div.style.fontFamili

2.元素的大小

偏移量

计算一个元素在页面的位置
function jisuanoffset(ele){
    var parent=ele.offsetParent;
    var left=ele.offsetLeft;
    while(parent){
        var l=parent.offsetLeft;
        left+=l
        parent=parent.offsetParent;
    }

    return left  
}

客户区的大小

• 客户区大小指的是元素内部空间的大小 不包括滚动条的大小
• 最常用的就是确定浏览器的视口大小

    function getvieport(){
      if( document.compatMode=="BackCompat")  //ie的标准兼容模式关闭
      {
           return 
           {  
                 width:document.body.clientWidth;
                 height:documentbody.clientHeight
           }
        }
else{
    return {
    width:document.documentElement.clientWidth;
    heigth:document.documentElement.clientHeight
    }
}
}

滚动大小

• 在没有滚动条的情况下 各个浏览器表示的有区别 fireFox中 cliengtHeigt和scrollHight相等代表文档呢容区域
  Opera Safari中 ScrollHeight代表视口大小 而ClientHeight代表文档内容区域大小
• 为了个大浏览器的兼容性

   width:Math(document.documentElement.clientWight,document.documentElement.scrollWidth)

在ie浏览器中 document.body.scrollHieght

• 也可以设置元素滚动位置

element.scrollTop=0;
确定元素的大小

• getBoundingClientReact() 返回一个矩形对象 四个属性 left top bottom right
• 指的是元素在页面的位置距离视口的距离
• 在i而浏览器中文档返回的左上角的坐标（2，2） 其他浏览器默认（0，0）

 document.documentElement.clientTop;  // 非IE为0，IE为2
document.documentElement.clientLeft; // 非IE为0，IE为2

function GetRect (element) {

    var rect = element.getBoundingClientRect();

    var top = document.documentElement.clientTop;

    var left= document.documentElement.clientLeft;

    return{

        top    :   rect.top - top,   //如果是IE7以下那么 结果为 ‘2 - 2’。 不是为IE的话 结果是 ‘ 0 - 0 ’；  不管哪种方式，结果最终就是0

        bottom :   rect.bottom - top, 

        left   :   rect.left - left,

        right  :   rect.right - left

    }

}