用代码说明height, clientHeight, offsetHeight, scrollHeight 区别及为什么height值有时取不到

最新推荐文章于 2023-04-18 22:33:51 发布

ForMyWebFrontSide

最新推荐文章于 2023-04-18 22:33:51 发布

阅读量1.5k

点赞数

分类专栏： css js取css属性文章标签： getComputedStyle currentStyle getPropertyValue

本文链接：https://blog.youkuaiyun.com/ForMyQianDuan/article/details/78677837

版权

css 同时被 2 个专栏收录

29 篇文章

订阅专栏

js取css属性

1 篇文章

订阅专栏

本文探讨了在不同浏览器环境下，height, clientHeight, offsetHeight和scrollHeight的差异。在有无横向滚动条的场景下，各属性在Chrome, Firefox, IE8, 和 IE11中的表现不一。例如，Chrome中，当存在横向滚动条时，#dv1的height需要减去滚动条高度；而其他浏览器则保持CSS定义的高度。clientHeight在所有情况下等于真实高度加padding减横向滚动条高度。offsetHeight始终等于真实高度加padding和border。至于scrollHeight，Chrome计算时不包括上下的padding，而其他浏览器则包含。此外，文章还提到style.height有时无法获取值的情况，因为document.getElementById().style只能获取内联样式，而不能获取link或外部样式表定义的CSS属性。" 41862657,793500,Linux环境下手动编译MongoDB C++驱动指南,"['MongoDB', 'Linux开发', 'C++', '数据库驱动']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            width: 100px;
            height: 200px;
            border: 1px solid red;
            padding: 10px;
            margin: 30px;
            overflow: auto;
        }

        #dv2 {
            width: 100%;
            height: 400px;
            background: green;
        }
    </style>
</head>
<body>

<div id="d1" style="height:200px;">
    <div id="dv2"></div>
</div>

</body>
<script>
    var d1 = document.getElementById('d1');
    //d1.style.margin取值为空，为什么？
    console.log('margin:', d1.style.margin);

    //试试获取.style.height，值是200px。为什么？
    console.log('d1 height:', d1.style.height);

    //试试打印出d1.style。结果是：获取到一个叫CSSStyleDeclaration的对象，
    // 里面的属性全部为空，除了height，因为height在#d1元素的style属性中。
    // 证明：.style只能取得style属性里的样式，而拿不到通过.class，#id引入的外部样式。
    console.log('d1.style:', d1.style);

    //怎么办？？？！！！！！办法是有的。
    // 对不同浏览器使用不同，见函数getStyle()。
    // (非IE)window.getComputedStyle(dom, '伪元素').属性名
    //或者 (IE)dom.currentStyle.属性名
    console.log('d1 margin2:', getStyle(d1, 'margin'));

    console.log('--------------------------------------------------')
    console.log('d1 margin:', getStyle(d1, 'margin'));
    console.log('d1 margin:', parseInt(getStyle(d1, 'margin')) * 2);
    console.log('d1 padding:', parseInt(getStyle(d1, 'padding')) * 2);
    console.log('d1 border:', parseInt(getStyle(d1, 'border')) * 2);

    console.log('----------------------------------------')
    console.log('d1 height:', getStyle(d1, 'height'),'解释：height = 真实height-横向scrollbarHeight(仅chrome); 如果没有横向滚动条高度则等于height，滚动条一般高17px。');
    console.log('height in chrome,firefox,ie8,ie11','183px,200px,200px,200px');
    // clientHeight 
    console.log('d1 clientHeight:', d1.clientHeight, '。解释：clientHeight = 真实height + padding - 横向scrollbarHeight(所有浏览器) ; 滚动条一般高17px。');
    console.log('clientHeight in chrome,firefox,ie8,ie11','全部203');

    // offsetHeight 
    console.log('d1 offsetHeight:', d1.offsetHeight, '。解释：offsetHeight = 真实height + padding + border。');
    console.log('clientHeight in chrome,firefox,ie8,ie11','全部222');

    // scrollHeight 
    console.log('d1 scrollHeight:', d1.scrollHeight);
    console.log('clientHeight in chrome,firefox,ie8,ie11','420,410,410,410');

    function getStyle(obj, cssAttr) {
        return obj.currentStyle ? obj.currentStyle[cssAttr] :
            window.getComputedStyle(obj, null)[cssAttr];
    }


</script>
</html>

浏览器使用Chrome（62.0.3202.94），firefox(55.0.3 )，IE8, IE11
有点晕了？看看结论。

一、
1.对于height：

没有横向滚动条，各浏览器表现一致。

在出现横向滚动条的情况下：#dv1的高度在不同的浏览器下面，表现居然不一样。chrome下，需要减去滚动条高度17。其它浏览器下，就是css中定义的高度。

2.对于clientHeight

没有横向滚动条，各浏览器表现一致。同为：clientHeight = 真实height + padding

在出现横向滚动条的情况下：各浏览器表现一致。 clientHeight = 真实height + padding-横向scrollbarHeight(所有浏览器) ; 滚动条一般高17px。

3.对于offsetHeight

在出现横向滚动条和没有横向滚动条的情况下：各浏览器表现一致。 offsetHeight = 真实height + padding + border。

4.对于scrollHeight(还有疑问)

在出现横向滚动条和没有横向滚动条的情况下：chrome与其它不一样，其余浏览器表现一致。
chrome：scrollheight = padding+ 内容box的高度。
其余浏览器：scrollheight = padding*2 + 内容box的高度。

2018———————-补充
二、为什么style.height有时候会取不到值？
1. 最常使用的document.getElementById(XX).style只能取到元素style属性中的css属性。对于link或其它形式定义的css属性无法取到，比如一个

要或者这个div的高度，style就是无能为力的。
不要着急，另外一个函数可以满足我们的需求，它就是window.getComputedStyle(“元素”)或者window.getComputedStyle(“元素”,”伪类”)，也就是第二个参数可选。window.getComputedStyle可以获取作用于当前元素的所有的css属性值，牛吧！
2. 兼容性：
桌面设备：IE9以上，其它Chrome,Firefox,Opera,Safasi 都支持。
移动设备：IE Mobile WP7以上，其它的Android,FireFox Mobile,Opera Mobile, Safari Mobile都支持。
3. 与currentStyle区别。
元素.currentStyle是IE浏览器的属性。如：document.documentElement.currentStyle。其它浏览器没有这个属性。元素.currentStyle不支持伪类样式获取。
4.进阶——getPropertyValue方法。
两者取到的结果实际一样的。
window.getComputedStyle(document.documentElement).height，
window.getComputedStyle(document.documentElement).getPropertyValue(‘height’)
只是。。。对某些属性，如float。没法用window.getComputedStyle(document.documentElement).float获取，属性要写成cssFloat或者styleFloat，这时使用getPropertyValue就可以屏蔽两者差异，用一种写法window.getComputedStyle(document.documentElement).getPropertyValue(‘float’)就可以做到。注意getPropertyValue不支持驼峰写法，支持肉串写法，如background-color.
兼容性：IE9以上，其它浏览器均可。
遇到IE6-IE8.就使用 getAttribute(“属性名”)，这时的属性名要用驼峰！

这篇写得很详细–张鑫旭的：
https://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/