js_screen_width_height_scroll.doc

JS 获取设置屏幕宽度/高度document.body.clientHeight与document.documentElement.clientHeight当你的网页有：的时候，document.body.clientHeight就用不了，页面无限拉长。这个时候可以用document.documentElement.clientHeight来替代。对于width同理。至于document.body.clientHeight与document.documentElement.clientHeight的区别，以及与WEB标准的关系，搞不清白了。谁要是知道，可以说说。 有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074*768 的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句hello world , 也仍然取到720.可是在XHTML中, 如果body 体中只有一行, 则document.body.clientHeight 只能取到那一行的高度, 约20px, 这时如何还想取到整个页面的高度, 就要用document.documentElement.clientHeight 来获取了.原因是: 在HTML 中, body 是整个DOM 的根, 而在XHTML 中, document 才是根, body 不再是根, 所以取body 的属性时, 不能再取到整个页面的值.区别新旧标准的行是: 前者指明该页面使用旧标准, 后者指明该页面使用新标准.总结:XHTML中用 document.documentElement.clientHeight 代替document.body.clientHeight 关于获取各种浏览器可见窗口大小的一点点研究 function getInfo() var s = ; s = 网页可见区域宽： document.body.clientWidth; s = 网页可见区域高： document.body.clientHeight; s = 网页可见区域宽： document.body.offsetWidth (包括边线和滚动条的宽); s = 网页可见区域高： document.body.offsetHeight (包括边线的宽); s = 网页正文全文宽： document.body.scrollWidth; s = 网页正文全文高： document.body.scrollHeight; s = 网页被卷去的高(ff)： document.body.scrollTop; s = 网页被卷去的高(ie)： document.documentElement.scrollTop; s = 网页被卷去的左： document.body.scrollLeft; s = 网页正文部分上： window.screenTop; s = 网页正文部分左： window.screenLeft; s = 屏幕分辨率的高： window.screen.height; s = 屏幕分辨率的宽： window.screen.width; s = 屏幕可用工作区高度： window.screen.availHeight; s = 屏幕可用工作区宽度： window.screen.availWidth; s = 你的屏幕设置是 window.screen.colorDepth 位彩色; s = 你的屏幕设置 window.screen.deviceXDPI 像素/英寸; /alert (s); getInfo(); 在我本地测试当中： 在IE、FireFox、Opera下都可以使用 document.body.clientWidth document.body.clientHeight 即可获得，很简单，很方便。 而在公司项目当中： Opera仍然使用 document.body.clientWidth document.body.clientHeight 可是IE和FireFox则使用 document.documentElement.clientWidth document.documentElement.clientHeight 原来是W3C的标准在作怪啊 如果在页面中添加这行标记的话 在IE中： document.body.clientWidth = BODY对象宽度 document.body.clientHeight = BODY对象高度 document.documentElement.clientWidth = 可见区域宽度 document.documentElement.clientHeight = 可见区域高度 在FireFox中： document.body.clientWidth = BODY对象宽度 document.body.clientHeight = BODY对象高度 document.documentElement.clientWidth = 可见区域宽度 document.documentElement.clientHeight = 可见区域高度 ? 在Opera中： document.body.clientWidth = 可见区域宽度 document.body.clientHeight = 可见区域高度 document.documentElement.clientWidth = 页面对象宽度（即BODY对象宽度加上Margin宽） document.documentElement.clientHeight = 页面对象高度（即BODY对象高度加上Margin高） 而如果没有定义W3C的标准，则 IE为： document.documentElement.clientWidth = 0 document.documentElement.clientHeight = 0 FireFox为： document.documentElement.clientWidth = 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight = 页面对象高度（即BODY对象高度加上Margin高） Opera为： document.documentElement.clientWidth = 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight = 页面对象高度（即BODY对象高度加上Margin高）我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和scrollHeight的解释，这里说的是 document.body，如果是 HTML 控件，则又有不同。这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。clientHeight大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。offsetHeightIE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。scrollHeightIE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。简单地说clientHeight 就是透过浏览器看内容的这个区域高度。NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。同理clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。说明以上基于 DTD HTML 4.01 Transitional，如果是 DTD XHTML 1.0 Transitional 则意义又会不同，在 XHTML 中这三个值都是同一个值，都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器。下载或浏览测试文件。关系公式:16:34 3/30/2013 = offsetHeight+ scrollTop滚动条部分SCROLL$(document).scrollTop() 获取垂直滚动的距离 即当前滚动的地方的窗口顶端到整个页面顶端的距离$(document).scrollLeft() 这是获取水平滚动条的距离看明白了吗？你要获取顶端 只需要获取到scrollTop()=0的时候 就是顶端了要获取底端 只要获取scrollTop()=$(document).height()-$(window).height() 就可以知道已经滚动到底端了$(document).height() /是获取整个页面的高度$(window).height() /是获取当前 也就是你浏览器所能看到的页面的那部分的高度 这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的 根据英文应该也能理解吧其实你可以自己做个实验就知道了 $(document).scroll(function() $(#lb).text($(document).scrollTop();)获取滚动条位置webjavascriptIEJavaScriptXHTMLHTML javascript 获取滚动条高度 /* * 取窗口滚动条高度 */ function getScrollTop() var scrollTop=0; if(document.documentElement&document.documentElement.scrollTop) scrollTop=document.documentElement.scrollTop; else if(document.body) scrollTop=document.body.scrollTop; return scrollTop; /* * 取窗口可视范围的高度 */ function getClientHeight() var clientHeight=0; if(document.body.clientHeight&document.documentElement.clientHeight) var clientHeight = (document.body.clientHeightdocument.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; return clientHeight; /* * 取文档内容实际高度 */ function getScrollHeight() return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight); 获取坐标： IE (event.x event.y) 获取滚动条位置： document.body.scrollTop （滚动条离页面最上方的距离） document.body.scrollLeft （滚动条离页面最左方的距离） 当我用js获取当前垂直或者水平方向滚动条位置的时候，使用document.body.scrollTop或者document.body.scrollLeft是无效的，得到的数值永远是0。但是，当写在“onscroll”事件里面的时候，上述方法可以获得当前滚动条的位置。 当网页最前面有以下内容： document.documentElement.scrollTop （滚动条离页面最上方的距离） document.documentElement.scrollLeft （滚动条离页面最左方的距离） 所以为了准确取得当前滚动条的位置，正确的使用方法是： document.documentElement.scrollTop：垂直方向 document.documentElement.scrollLeft：水平方向 var Viewport= top : function() return window.pageYOffset | document.documentElement &