js获取浏览器和元素对象的尺寸

1.屏幕尺寸

 window.screen.height               //屏幕分辨率的高

 window.screen.width                //屏幕分辨率的宽

 window.screen.availHeight          //屏幕可用工作区的高

 window.screen.availWidth           //屏幕可用工作区的宽

2、window对象尺寸

  //获取窗口中文档显示区域的宽度及高度（兼容IE与DOM浏览器）：

  window.innerWidth ? window.innerWidth : document.body.clientWidth;

  window.innerHeight ? window.innerHeight : document.body.clientHeight;

 //innerHeight：窗口中文档显示区域的高度，不包括菜单栏、工具栏等部分，可读可写。IE不支持，IE中body元素的clientHeight与该属性相同。

 //innerWidth：窗口中文档显示区域的宽度，该属性可读可写。IE不支持，IE中body元素的clientWidth与该属性相同。clientHeight与clientWidth属性是只读的。

3、元素对象尺寸

offsetWidth （width+padding+border)当前对象的宽度。

　　style.width也是当前对象的宽度(width+padding+border)。区别：

　　1)style.width返回值除了数字外还带有单位px；
　　2)如对象的宽度设定值为百分比宽度,则无论页面变大还是变小，style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值；
　　3)如果没有给HTML元素指定过width样式，则style.width 返回的是空字符串

offsetHeight :(Height+padding+border)当前对象的高度。

　　style.height也是当前对象的高度(height+padding+border)。区别：

　   1)style.height返回值除了数字外还带有单位px；
       )如对象的高度设定值为百分比高度,则无论页面变高还是变矮，style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值；
      3)如果没有给HTML元素指定过height样式，则style.height返回的是空字符串

 scrollWidth     //获取对象的滚动宽度

 scrollHeight    //获取对象的滚动高度

 clientWidth     //获取对象可见内容的宽度，不包括滚动条，不包括边框

 clientHeight    //获取对象可见内容的高度，不包括滚动条，不包括边框

4、元素对象偏移属性

 offsetLeft      //当前对象到偏移参考父元素左边的距离,不能对其进行赋值,设置对象到父元素左边的距离用style.left

 offsetTop       //当前对象到偏移参考父元素顶部的距离,不能对其进行赋值,设置对象到父元素顶部的距离用style.top

 offsetParent    //当前对象的偏移参考父元素

巴特西

js获取浏览器和元素对象的尺寸

1.屏幕尺寸

2、window对象尺寸

3、元素对象尺寸

4、元素对象偏移属性

最新文章

热门文章