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

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

本篇主要以chrome为准，可能各个浏览器之间还是有一些区别，但很多自己还未真正遇到过，还不是很清楚，等以后碰到了类似的兼容性问题，再记录到这里，这次就chrome浏览器中各个属性的区别做个记录，以方便以后的查看

一 clientHeight,offsetHeight,scrollHeight的区别

　　clientHeight在各个浏览器中基本是一样的，一致认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，不包括滚动条，不包括margin，但包括padding，也就是说实际的clientHeight = 当前对象可视区域的高度 + padding值，如下图所示 clientHeight = 对象可视区域高度(300) + 上下padding值(20) = 320

在不同浏览器都实用的javascript方案:

var w= document.documentElement.clientWidth || document.body.clientWidth;
var h= document.documentElement.clientHeight || document.body.clientHeight;

　　offsetHeight = 当前对象的高度 + 滚动条 + borde值 + padding值，上图中当前对象的高度和可视区域高度是一样的，所以offsetHeight = 300 + padding(20px ) + border(10px)  = 330

scrollHeight是网页内容的实际高度，最小值就是clientHeight，也就是说可以是跟clientHeight相等的,但我们假设这样一个情形，如下代码所示，父div高度是300px，子div高度是500px，这时候就会形成滚动条,此时父div的结构图如下：

父div的的scrollHeight 就应该是scrollHeight = 500px + padding值

因为此时产生了滚动条，此时父div的可视区域高度为283，当前对象高度也就是父div的高度为300，因此

clientHeight = 283px + padding值(20px) = 303px

offsetHeight = 父div的高度(300px) + padding值(20px) + 边框(10px) = 330px

<div id="parent" style="padding:10px;border:5px red solid;height:300px;width:200px;overflow:auto">
  <div style="height:500px;width:400px"></div>
</div>

二 clientTop,offsetTop,scrollTop的区别

clientTop的理解可以参考clientHeight，clientHeight的的计算方式是当前可视区域的高度 加上 padding值，那么clientTop就可以理解为当前可视区域到上一级元素的距离。

如上图所示，clientTop就是5px，大部分情况下，clientTop都是这个border值。

offsetTop是当前对象到body元素的距离，它的计算方式相对复杂，先从上图进行理解，当前对象指的是border边框之内的区域，所以计算offsetTop要从当前对象的margin开始，计算公式如下 offsetTop = 当前对象的margin-top + 当前对象所有上级元素的margin-top + 当前对象所有上级元素的border-top，需要注意的是offsetTop是不能进行直接赋值的，只能通过这样的计算方式得到。

scrollTop是当前对象的最顶部到当前对象在当前窗口显示的范围内的顶边的距离．即是在出现了纵向滚动条的情况下，滚动条拉动的距离。

以上就是js中不同的height、 top的区别对比，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • window.top[_CACHE]实现多个jsp页面共享一个js对象

    今天,在项目中遇到一个问题,两个js页面要共享一个就js对象.js全局变量和静态变量都不行,其他苦逼的小农们就不要去强求了.而LZ又不想用cookie来存放,一是不安全,二个人喜好.最后发现一种超级方法来解决这个困扰,那就是用window.top['_CACHE']来存放这个变量,即可实现,不同Jsp页面直接的对象共享. var share = { /** * 跨框架数据共享接口 * @param {String} 存储的数据名 * @param {Any} 将要存储的任意数据(无此项则返回被查

  • JS获取iframe中marginHeight和marginWidth属性的方法

    本文实例讲述了JS获取iframe中marginHeight和marginWidth属性的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <body> <iframe id="myframe" src="demo_iframe.htm" marginheight="50" marginwidth="50"> <p>Your bro

  • js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版

    js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth   (包括边线的宽);网页可见区域高: document.body.offsetHeight  (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.scrollHeight;网页被卷去的高: documen

  • js获取height和width的方法说明

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>js获取height和width总结</title> <meta content="t

  • JS获取scrollHeight问题想到的标准问题

    我在作一个iframe自动调整高度时,被嵌入的页面commit.asp的代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • JS中完美兼容各大浏览器的scrolltop方法

    1.各浏览器下 scrollTop的差异 IE6/7/8/9/10: 对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 : 对于有doctype声明的页面则可以使用 document.documentElement.scrollTop  : Safari: safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset : Firefox: 火狐等等相对标准些的浏览器就省心多了,直接

  • 利用JS解决ie6不支持max-width,max-height问题的方法

    今天遇到一个关于用js解决ie6不支持支持max-width,max-height的问题,刚开始用jQuery方法来实现,不过一直获取不到css里面的值,如 复制代码 代码如下: if($.browser.msie && $.browser.version == 6.0)  {    var maxWidth = parseInt($('.viewBigPic img').css('max-width'));    $('.viewBigPic img').each(function(){

  • js中top/parent/frame概述及案例应用

    引用方法top: 该变量永远指分割窗口最高层次的浏览器窗口.如果计划从分割窗口的最高层次开始执行命令,就可以用top变量. parent: 该变量指的是包含当前分割窗口的父窗口.如果在一个窗口内有分割窗口,而在其中一个分割窗口中又包含着分割窗口,则第2层的分割窗口可以用parent变量引用包含它的父分割窗口. 附:Window对象.Parent对象.Frame对象.Document对象和Form对象的阶层关系 Windwo对象→Parent对象→Frame对象→Document对象→Form对象

  • js中的preventDefault与stopPropagation详解

    首先讲解一下js中preventDefault和stopPropagation两个方法的区别:preventDefault方法的起什么作用呢?我们知道比如<a href="http://www.baidu.com">百度</a>,这是html中最基础的东西,起的作用就是点击百度链接到http://www.baidu.com,这是属于<a>标签的默认行为,而preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情.看一段代码大家就

  • js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • js中top的作用深入剖析

    每一个WINDOW对象,不论他是常规HTML页面.框架集页面.子框架还是孙子框架,都具有一个TOP属性.这个属性返回对载入浏览器得最顶层WINDOE对象得引用: .如果WINDOW对象是常规HTML页面,TOP就是SELF .......顶层框架及页面, ........ .......子框架,TOP指向框架得父亲,也就是说,下面两个表达式是等效的: SELF.TOP SELF.PARENT .如果WINDOW对象是子框架,TOP指向框架得祖父.也就是说下面两个表达式是等效得 self.top

随机推荐