obj.offsetHeight与obj.style.height的区别

最新推荐文章于 2024-08-15 16:23:56 发布

原创最新推荐文章于 2024-08-15 16:23:56 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

前端相关专栏收录该内容

47 篇文章

订阅专栏

本文探讨了在引入W3C支持的HTML文档中，使用DOM操作时JS中对象属性的不同表现，包括offsetHeight与style.height的区别，以及如何正确获取元素的实际高度。

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

当我们在jsp头部加了W3C的支持后，有些以前的JS会出现取不到值的情况

<!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">

一、obj.offsetHeight与obj.style.height的区别

我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：

1、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。

2、offsetTop 只读，而 style.top 可读写。

3、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。

    <div style="width:100px;height:100px;background-color:#FF0000;overflow:hidden;border:2px solid #00ff00;" id="p"></div> 
    <script type="text/javascript"> 
    var p = document.getElementById("p"); 
    window.status = "height is:" + p.style.height + " - offsetHeight is:" + p.offsetHeight; 
    </script>

****如果给某个DIV没有指定height，那么你试图读取style.height的时候会读到空，而offsetHeight可以读取div的是实际高度。