浏览器和对象的dom属性

Posted 2020-11-03 凌晨四点的北京

1 DOM对象：var obj=document.getElementById(‘*‘);

　　obj.scrollWidth 是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）

　　obj.clientWidth 是对象看到的宽度（不含border)。  

　　obj.offsetWidth 是对象看到的宽度（含border，如滚动条的占用的宽） ;

　　　　*~*  offsetWidth的值总是比clientWidth的值大;

　　offsetLeft、offsetTop属性：获取元素相对于文档左上角的坐标位置

标题：offsetTop 与 style.top 的区别

 　　offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。

　　offsetTop 只读，而 style.top 可读写。

　　如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

 

 

2 window对象：

1）innerHeight属性：窗口中文档显示区域的高度，不包括菜单栏、工具栏等部分。该属性可读可写。

     IE不支持该属性，IE中body元素的clientHeight属性与该属性相同。

（2)innerWidth属性：窗口中文档显示区域的宽度，同样不包括边框。该属性可读可写。

     IE不支持该属性，IE中body元素的clientWidth属性与该属性相同。

     clientHeight与clientWidth属性是只读的。

     另外，IE不支持outerWidth、outerHeight属性。

 (3)pageXOffset属性：整数只读属性，表示文档向右滚动过的像素数。

     IE不支持该属性，使用body元素的scrollLeft属性替代。

 (4)pageYOffset属性：整数只读属性，表示文档向下滚动过的像素数。

     IE不支持该属性，使用body元素的scrollTop属性替代。

 兼容IE与DOM浏览器，如何获取窗口中文档显示区域的宽度及高度，使用?:条件语句，如下：

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

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

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;

屏幕可用工作区宽度：window.screen.availWidth;