【关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别一览】的更多相关文章

[DOM基础]offsetHeight,clientHeight,scrollHeight,innerHeight,outerHeight等属性的解释

由于经常搞混这几个属性,所以查找资料总结一下,方便以后翻出来温习. 一.偏移量-以offset开头的 1.offsetHeight:元素在垂直方向上占用的空间大小,像素.包括元素的高度.可见的水平滚动条的高度.上边框高度和下边框高度. 2.offsetWidth:同上,水平上占用的空间. 3.offsetLeft:元素的左外边框至包含元素的左内边框的距离. 4.offsetTop:同上,上部的距离. 包含元素的引用保存在offsetParent属性中,不一定是parentNode,比如<td>…

彻底搞清楚DOM元素的height,offsetHeight,clientHeight,scrollHeight

测试用例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&quo…

Jquery中的height(),innerHeight(),outerHeight()的区别

前言 最近练习做弹窗,遇到height(),innerHeight(),outerHeight()的区别. 根据下面的盒模型来了解三者的区别. height():element的height; innerHeight(): height + padding; outerHeight(): height + padding +border; ouerHeight(true): height + padding + border + margin; 注意:.outerHeight  is not a…

关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究

我是以chrome浏览器做的研究. 先看一段代码: <script> window.addEventListener('DOMContentLoaded',function(){ var node1 = document.querySelector('#father'); var node2 = document.querySelector('#child'); console.log('offsetTop==offsetHeight==scrollTop==scrollHeight==cli…

关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别一览

平时,不管在pc端页面还是移动端页面,因为我们一般很少会设置某个块的的高度,但是呢,我有时候有需要取到这些高度以便于我们方便进行判断和下一步的编写.一般这个时候我都是直接的获取一个块的高度.height(),来解决,但是有的时候我翻翻查查发现还有offsetheight,而这两者之间还是有一些差别的.下面都以高度来说,详细的区别在取某块或某元素高度的时候,这些height.offsetheight.clientheight.scrollheight.innerheight.outerheight…

offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别

这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离最近的一个定位的父元素的上边距是60px. 这里,在控制台打印出各个高度值: var c =document.getElementsByClassName('content')[0]; console.log(c.offsetTop,c.offsetHeight,c.clientHeight,c.s…

offsetHeight,clientHeight,scrollHeight,offsetY等属性的理解

el.offsetHeight = height + padding + border(滚动条是在边框内的,自然也包括在内) el.clientHeight = 可视化看到的高度 (就是content的高度) el.scrollHeight = 整个元素的高度 ( 包括了clientHeight看不到的那部分,一般就是你css设置的元素高度) el.offsetTop = 子元素的外边框到父元素的内边框的垂直距离 (没边框时自然就是content到content的距离) el.offsetLef…

jquery 之height(),innerHeight(),outerHeight()方法区别详解

在jQuery中,获取元素高度的函数有3个,它们分别是height(). innerHeight().outerHeight(). 与此相对应的是,获取元素宽度的函数也有3个,它们分别是width(). innerWidth().outerWidth(). [补充1]css('width')中的width即是元素内容区的宽度,和width()一样. 但是width()返回的是个数字,css('width')返回的是带单位的字符串.     [补充2]若是匹配了一系列元素,那么width()或者c…

height、clientHeight、offsetHeight、scrollHeight、height()、 innerHeight()、outerHeight()等的区别

1.height height是css属性,这个属性定义元素内容区的高度,在内容区外面可以增加内边距.边框和外边距. 当  box-sizing: content-box 时,高度应用到元素的内容框. 当  box-sizing:border-box时,高度包含了内容框.内边距和边框. 2.clientHeight Element.clientHeight只读属性是没有的CSS或内联布局框元素为零,否则它的像素单元内的高度,但不包括填充水平滚动条的高度,边界或边缘. // 包含元素的conten…

jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offsetTop.scrollTop 概念一直都很模糊,借此写个demo看看. 举例看看 jquery 对象的 height.innerHeight.outerHeight 几个区别: <%@ page language="java" import="java.util.*&quo…

各种高度的区别及height、clientHeight、scrollHeight、offsetHeight的区分

1.height.clientHeight.scrollHeight.offsetHeight 我们来实现test中的onclick事件    function justAtest()    {        var test= document.getElementById("test");        var test2=document.getElementById("test2")        var test3=document.getElementB…

height clientHeight scrollHeight offsetHeight的大致区别

这主要是针对火狐浏览器来讲的: height:就是div的高度,就是style中设置的高度:在chrome中clientHeight是包含padding的,offsetHeight和clientHeight差不多,而scrollHeight则是滚动条滚动的高度, 可以用这个例子来查看区别: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></titl…

Height、clientHeight、scrollHeight、offsetHeight 、scrollTop、offsetTop

Height 返回当前文档中的<body>元素的高度 clientHeight 对于没有定义CSS或者内联布局盒子的元素为0,否则,它是元素内部的高度(单位像素),包含内边距,但不包括水平滚动条.边框和外边距. clientHeight 包含 padding scrollHeight scrollHeight的值在有滚动条的情况下包括滚动条滚动出去的内容,没有滚动条时是和clientHeight相同.包括元素的padding,但不包括元素的border和margin.scrollHeight也…

offsetHeight, clientHeight与scrollHeight的区别

  在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论.以下结论皆是在标准模式下测试通过的,没有测试quirk模式. clientHeight 大部分浏览器对 clientHeight 都没有什么异议,认为是元素可视区域的高度,也就是说元素或窗口中可以看到内容的这个区域的高度,即然是指可看到内容的区域,滚动条不算在内.但要注意padding是算在内.其计算方式为clientHeight = topPadding + bottomPadding+ height - 水平滚动…

四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异

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

详解clientHeight、offsetHeight、scrollHeight

关于clientHeight.offsetHeight.scrollHeight   window.screen.availWidth 返回当前屏幕宽度(空白空间)  window.screen.availHeight 返回当前屏幕高度(空白空间)  window.screen.width 返回当前屏幕宽度(分辨率值)  window.screen.height 返回当前屏幕高度(分辨率值)  window.document.body.offsetHeight; 返回当前网页高度  window…

clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案

clientHeight , scrollHeight , offsetHeight相信每个人都用过,可是每次用都要查一下到底哪个是文档大小哪个是视口大小,还有头疼的兼容问题. 先来官方的了解一下这三个属性: clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小) scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高度) offsetHeight: 偏移量,包含元素在屏幕上所用的所有可见空间(包括所有的内…

clientHeight / scrollHeight / offsetHeight 等属性的区别图

网页(内容)可见区域宽:document.body.clientWidth 网页(内容)可见区域高:document.body.clientHeight 即页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关. 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWid…

Jquery中的 height(), innerHeight() outerHeight()区别

jQuery中的 height innerHeight outerHeight区别 标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参数为true时:高度+补白+边框+边距 html代码: <div class="width: 150px;height:20px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" i…

height/innerHeight/outerHeight

<script> $(document).ready(function(){ alert("height:"+$("#div").height()); //20px; height属性值 alert("innerHeight:"+$("#div").innerHeight());//30px; height属性值+padding属性值*2 alert("outerHeight:"+$("…

offsetTop/offsetHeight scrollTop/scrollHeight 的区别

offsetTop/offsetHeight   scrollTop/scrollHeight  这几个属性困扰了我N久,这次一定要搞定. 假设 obj 为某个 HTML 控件. obj.offsetTop   obj距离上方或上层控件的位置,整型,单位像素. obj.offsetHeight   obj自身的高度,整型,单位像素. offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是: 一.offsetTop 返回的是数字,而 st…

关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别

二.也是平时经常用到的offsetheight 它返回的高度是内容高+padding+边框,但是注意哦,木有加margin哦,当然一般也木有啥需要把margin加进去的,以上代码为例,结果显示上图h2: 对了,为什么这个offsetheight的用法和height的用法不一样的,因为offsetHeight是js对象所能支持的方法,而$("")所获得的是一个jquery对象,他是不支持offsetHeight的.所以只能用js方式来获取啦. 三.我么怎么用的clientHeight和s…

height、clientHeight、scrollHeight、offsetHeight区别

转自 http://www.cnblogs.com/yuteng/articles/1894578.html 我们来实现test中的onclick事件    function justAtest()    {        var test= document.getElementById("test");        var test2=document.getElementById("test2")        var test3=document.getE…

offsetHeight、scrollHeight、clientHeight、height

对这几项进行彻底研究. 第一步:纯净div,没有margin,padding,border,height设置为200px. 添加滚动条,overflow:scroll,结果div的高度被压缩,因为被滚动条占用17px(滚动条的高度为17px). 加入滚动条前: scrollHeight=200px offsetHeight=200px 加入滚动条后: scrollHeight=183px=(内容高度200px-滚动条17px)  (说明scrollHeight已经不包括滚动条的高度) offse…

浅谈style.height、clientHeight、offsetHeight、scrollHeight

先分别介绍以下,以下资料来自MDN HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数. Element.clientHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数. Element.scrollHeight 是一个只读属性,是一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容 style.height clientHeight offsetHeig…

scrollWidth,offsetWidth,clientWidth,width;scrollHeight,offsetHeight,clientHeight,height;offsetTop,scrollTop,top;offsetLeft,scrollLeft,left还有谁

题中的那么多属性让人头都大了,他们到底是什么意思?不同浏览器的实现是一样的吗?以下所有结论来自chrome版本 53.0.2785.89 (64-bit)和firefox版本52.0.2,操作系统ubuntu16.04的测试,关于IE及其它浏览器并没有考虑. 一.谈谈XXWidth 1.width 这个是style对象的一个属性,跟你在css样式里写的那个width的值是一样的,注意他是带单位的. <!DOCTYPE html> <html lang="en">…

JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念

JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能,其中使用最多的场景是加载更多,当鼠标滚动至页面下方时,自动加载下一页的内容.另一个常用的场景是当用户滚动至页面某一地方时,页面会给出提示或是将某些重要信息或按钮显示出来.实现这些效果的关键是要区分clientHeight.scrollHeight.offsetHeight等属性的区别.刚好最近项目中有用到过这些概念,今天就抽空整理下关于这几个属性的区别. 1.概念 clientHeight/clientWidth 指元素可见区域的…

clientHeight,offsetHeight与scrollHeight的相关知识

在html里,width与height是最常用也是最基础的两个属性,因此,在js里,我们也经常需要操作这两个属性.js关于这两个属性提供了client*,offset*与scroll*,很多同学搞不清楚这三者之间的区别,经常望着这三个属性满脸问号,不知道该用哪个.所以今天就来看一下这三个属相的区别. JUST SHUTUP AND SHOW ME YOUR CODE!! ok,不多说话,看代码. <style> .out{ width:100px; height:100px; backgrou…

clientHeight、offsetHeight、scrollHeight详解

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

clientHeight scrollHeight offsetHeight

<div  style="height:200px;padding:10px;border:1px solid green;"></div> 对于上面的div,它的border的height有多高?答案是200+10*2+1*2=222. 直接上结论:在style或css样式中的 height:200px  指的是内容可视区的高度,不含内边距,不含border,不含外边距,而不是div的高度. 以下结论在 firefox.chrome.IE10+.QQ浏览器中都…