style.height、offsetHeight、clientHeight、scrollHeight的区别

style.height

包括元素的滚动条,不包括边框

clientHeight

不包括元素的滚动条和边框

offsetHeight

包括元素的滚动条和边框

scrollHeight

offsetHeight+scrollTop

小贴士:

在IE下,创建一个oLi

    <style>
        li{/*不设置li的高度*/}
    </style>
    <script>
        var oLi = document.createElement(‘li‘);
        oLi.innerHTML=‘我是li的内容‘;
        /*
            在oLi还没有添加到父级之前,
            IE的获取当前样式方法
            getComputedStyle(oLi).height
            只能返回"auto"

            而oLi.clientHeight能返回实际高度

        */
        document.body.appendChild(oLi);
    </script>

版权声明:本文为博主原创文章,转载还请留言。

时间: 2024-11-05 16:11:48

style.height、offsetHeight、clientHeight、scrollHeight的区别的相关文章

彻底搞清楚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

浅谈style.height、clientHeight、offsetHeight、scrollHeight

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

关于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

主流浏览器下下offsetHeight\clientHeight\scrollHeight以及window的innerHeight\outHeight等的关系

1.Firefox32.03 body clientHeight:body.padding+ body.height(css设置或内容撑的,以设置的优先); offsetHeight:body.padding+ body.height(css设置或内容撑的,以设置的优先)+body.border; scrollHeight:body.padding+ body.height(css设置或内容撑的,谁大谁优先); documentElement clientHeight= window.inner

offsetTop/offsetHeight scrollTop/scrollHeight 的区别

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

document.documentElement与body下clientHeight,scrollHeight等区别

本次说明仅在chrom环境下,ie等其他浏览器可能不同 1获取显示屏高度(pc和移动端) window.screen.height => 这个好理解,不多说. 2获取浏览器可视窗口高度(PC端) document.documentElement.clientHeight => 就是网页在浏览器中可见高度,不包括浏览器自身的状态栏,随着浏览器大小变化: 3获取网页内容高度 1)document.documentElement.scrollHeight = document.documentEle

clientHeight ,offsetHeight,style.height,scrollHeight的区别与联系

style.height 包括元素的滚动条,不包括边框 clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeight offsetHeight 包括元素的滚动条和边框,只有在没有元素的滚动条和边框的情况下,offsetHeight==style.height==clientHeight scrollHeight offsetHeight+scrollTop,只有在没有元素的滚动条和边框和滚动时的情况下,offsetHe

clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系

style.height 包括 元素的滚动条,不包括边框clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeightoffsetHeight 包括元素的滚动条和边框,只有在没有元素的滚动条和边框的情况下,offsetHeight==style.height==clientHeightscrollHeight offsetHeight+scrollTop,只有在没有元素的滚动条和边框和滚动时的情况下,offsetHeig

关于offsetX,clientX,pageX,offsetHeight,clientHeight ,scrollHeightX的区别

一.关于offsetX,clientX,pageX,scrollX的区别 offsetX表示点击点到所点击物体左边距的距离: clientX表示点击点到浏览器左边的距离,该点击点会随着滚动条的移动而发生变化: pageX表示点击点到浏览器左边的距离,但点击点不会因滚动条的移动而变化: scrollX表示点击点到屏幕左边的距离 二.关于offsetHeight,clientHeight ,scrollHeight的区别 clientHeight:内容可视区域的高度,也就是说页面浏览器中可以看到内容