`
bluewind1433
  • 浏览: 153018 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

各浏览器clientHeight、offsetHeight、scrllHeight区别

 
阅读更多

各浏览器clientHeight、offsetHeight、scrollHeight区别

 

clientHeight

      大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

 

offsetHeight

IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。

NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

 

scrollHeight

IE、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 的解释与上面相同,只是把高度换成宽度即可。

分享到:
评论

相关推荐

    clientHeight offsetHeight scrollHeight clientWidth详解

    clientHeight offsetHeight scrollHeight clientWidth详解

    clientHeight,offsetHeight,scrollHeight,offsetParent和parentElement,offsetLeft.

    clientHeight,offsetHeight,scrollHeight,offsetParent和parentElement,offsetLeft.

    分析clientHeight、offsetHeight、scrollHeight

    NULL 博文链接:https://love2java.iteye.com/blog/403776

    clientHeight

    四种浏览器对_clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth_和_scrollWidth_的解

    解析offsetHeight,clientHeight,scrollHeight之间的区别

    大部分浏览器对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,即然是指可看到内容的区域,滚动条不算在内。但要注意padding是算在内。其计算方式...

    07-offsetHeight-scrollHeight-clientHeight-区别.md

    大厂前端面试题目|# 前端基础知识 ...本章将通过多个面试题,讲解前端常考的基础知识面试题,同时复习一些重要的知识点。 ## 为何要考察 扎实的前端基础知识,是作为前端工程师的根本。基础知识能保证最基本的使用,...

    根据例子来理解scrollHeight,clientHeight,scrollTop的区别

    包含以下内容: function test(){ var infoHeight = document.getElementById(”info”).scrollHeight; //scrollHeight 为层实际的高度,有实际有多高就多高,与当前网页高度无关。

    火狐在用offsetHeight获取div的高度时为0的解决方法

    火狐在需要获取div的高度时,往往需要用到offsetHeight,有时会碰到offsetHeight获取到为0的现象, 在使用IE或者火狐中,特别在目前div+css的方式,往往不定义div的高度,这是在添加div内容后,需要获取div的高度时...

    详解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理

    尺寸相关:offsetHeight、clientHeight、scrollHeight; 偏移相关:offsetTop、clientTop、scrollTop、pageYOffset、scrollY; 获取相对视口位置:Element.getBoundingClientRect(); 获取元素的style对象:...

    js关于不同浏览器的不同之处

    关于clientHeight、offsetHeight、scrollHeight window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏幕高度(空白空间) window.screen.width 返回当前屏幕宽度(分辨率值) ...

    js中不同的height, top的区别对比

    每次看到js中的 clientHeight(clientTop), offsetHeight(offsetTop),scrollHeight(scrollTop)就头大,根本分不清这几种的区别,然而碰到这些已经不 值一两次了,然后每次都要查看一下各自的区别,才能决定使用哪个...

    js检查是否关闭浏览器的方法

    本文实例讲述了js检查是否关闭浏览器的方法。分享给大家供大家参考,具体如下: //关闭浏览器提示信息 [removed] = function (e) { e = e || window.event; var y = e.clientY; if (y <= 0//点击浏览器或者...

    Js与Jq获取浏览器和对象值的方法

    document.documentElement.clientHeight ==> 浏览器可见区域高度 document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 Jq获取浏览器高度和宽度 $(window).widt

    javascript知识点收藏

    1.四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。这四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。clientHeight大家对 ...

    JavaScript获取网页、浏览器、屏幕高度和宽度汇总

    经常发现在写JavaScript的时候,都需要用到网页、浏览器或屏幕的高度和宽度来解决布局定位的问题,时常前用后忘,要不就是在网上search,干脆自己总结一下,这样也方便再次使用,省时省力。 网页可见区域宽:...

    JS大全 web编程

    scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解 2009年12月14日,16:58:19 | ArthurXF ...(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

    js获取浏览器基本信息大全

    网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth ...

    JS中位置与大小的获取方法

    scrollHeight,clientHeight,offsetHeight的区别 说明: scrollHeight:DOM元素的实际内容的高度,不包border的高度,会随DOM元素中内容的增加(超过可视区后)而变大。 clientHeight:DOM元素内容可视区的高度,不包含...

    根据浏览器屏幕大小高度自适应

    根据浏览器屏幕大小高度自适应

Global site tag (gtag.js) - Google Analytics