首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

区分clientHeight、scrollHeight、offsetHeight

区分clientHeight、scrollHeight、offsetHeight clientHeight、offsetHeight、scrollHeight都是用来描述DOM元素的高度的属性;对于同一个元素...offsetHeight: 只读属性,所表示的元素高度包括:元素的内容高度(如果有下滚动条,需减去下滚动条的高度,下滚条默认高度为17px)+上下padding+上下border+下滚动条高度(如果元素有下滚动条...,则offsetHeight表示的高度包含下滚动条);不包括上下margin;我们通过css设置的高度、上下padding、上下border组成了offsetHeight的值。...在数值上相等; 3、如果元素内的子元素高度大于该元素,scrollHeight所表示的元素高度为:元素内子元素的高度+该元素的上下padding; 参考文献: [1] css clientheight、offsetheight...、scrollheight详解 [2] 搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop [3] js中offsetHeight

1.5K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    clientHeight、scrollHeight、offsetHeight和scrollTop之间区别

    document.body.clientHeight 正文内容高(整个元素的高度,包括带滚动条的隐蔽的地方):document.body.scrollHeight 内容高+padding+边框:document.body.offsetHeight...它主要是返回元素的高度或者说这个div的内容的高度,它是jquery对像,如果只是想取到某个内容的高度,那完全可以使用这个,按照上面所设置的参数,得到的就是200,如图h1: 二、也是平时经常用到的offsetheight...它返回的高度是内容高+padding+边框,但是注意哦,木有加margin哦,当然一般也木有啥需要把margin加进去的,以上代码为例,结果显示上图h2; 对了,为什么这个offsetheight...的用法和height的用法不一样的,因为offsetHeight是js对象所能支持的方法,而$(“”)所获得的是一个jquery对象,他是不支持offsetHeight的。

    1.5K20

    height、offsetheight、clientheight、scrollheight、innerheight、outerheight

    height、offsetheight、clientheight、scrollheight、innerheight、outerheight 平时,不管在pc端页面还是移动端页面,因为我们一般很少会设置某个块的的高度...一般这个时候我都是直接的获取一个块的高度.height(),来解决,但是有的时候我翻翻查查发现还有offsetheight,而这两者之间还是有一些差别的。...下面都以高度来说,详细的区别在取某块或某元素高度的时候,这些height、offsetheight、clientheight、scrollheight、innerheight、outerheight的不同的地方...$(function(){ var h1=$("#box").height(); var h2=document.getElementById("box2").offsetHeight...height的用法不一样的,因为offsetHeight是js对象所能支持的方法,而$("")所获得的是一个jquery对象,他是不支持offsetHeight的。

    1.5K20

    JavaScript 基于offsetHeight和clientHeight判断是否出现滚动条

    HTMLEelement.offsetHeight简介 HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。...通常,元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框、内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before或:after等伪类元素的高度。...参考链接:https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetHeight HTMLEelement.clientHeight.../API/Element/clientWidth 判断目标元素是否出现滚动条 targetElement为目标html元素,以下代码用于判断该元素内是否出现滚动条 if (targetElement.offsetHeight...垂直滚动条"); } if (tableBody.offsetWidth > tableBody.clientWidth) { console.log("出现垂直滚动条"); } if (obj.offsetHeight

    1.3K30

    html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight

    浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight 发布时间:2020-07-17 09:27:20 来源:亿速云 阅读:223 作者:...小猪 小编这次要给大家分享的是浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获...就只是border-top-width 类似的属性还有一个clientLeft,顾名思义…… offsetHeight,只读 元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框...还是上面的图,div的offsetHeight为112。...i < 233; i++) inner.innerText += `第${i}行\n`; } 看完这篇关于浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight

    2.2K20

    JS中clientHeight、scrollHeight和offsetHeight的大坑,滚动条抖动问题解决

    JS中clientHeight、scrollHeight和offsetHeight的大坑,滚动条抖动问题解决 1.什么是clientHeight、scrollHeight和offsetHeight...1.1 clientHeight是什么 1.2 offsetHeight是什么 1.3 clientHeight和offsetHeight的注意点 1.4 scrollHeight和它的大坑 jQuery...1.2 offsetHeight是什么 单词offset意为补偿,抵消,而offsetHeight也很简单,关于offsetHeight网上并没有太多争议,这里直接给出我的结论 offsetHeight...同样的offsetHeight获取到的高度是网页实际渲染出来的高度+内边距+边框。和元素本身是否可见无关。...1.3 clientHeight和offsetHeight的注意点 当元素设置为display:none;之后,clientHeight和offsetHeight的高度均变为0,因为浏览器不会对display

    5.9K10
    领券