本文介绍如何使用 JavaScript 获取和设置 div 元素的高度和宽度，重点解决跨浏览器兼容性问题。通过 offsetHeight 和 offsetWidth 属性获取尺寸，并在设置样式时追加 'px' 单位以确保在 Firefox 和 IE 等浏览器中正常工作。
获取与设置 Div 宽高的兼容方案
在 Web 开发中，经常需要动态获取或修改 div 元素的高度和宽度，并确保代码在不同浏览器中表现一致。以下代码展示了具体的实现方式。
HTML 结构定义如下：
<div id="div1" style="height:300px;width:200px;">http://www.itdos.com</div>
<div id="div2" style="height:30px;width:20px;">http://www.itdos.com</div>要获取 id 为 div1 的元素宽高，可以使用 offsetHeight 和 offsetWidth 属性。这些属性在 Firefox 和 IE 等主流浏览器中均能兼容使用。
获取宽高的代码如下：
alert(document.getElementById("div1").offsetHeight); //兼容FF、IE等
alert(document.getElementById("div1").offsetWidth); //兼容FF、IE等若需将 div1 的宽高设置为与 div2 相同，需要注意赋值时的单位处理。直接赋值数值在某些浏览器（如旧版 IE）中可能有效，但为了兼容 Firefox 等浏览器，必须显式添加 'px' 单位。
设置 div1 宽高为 div2 宽高的代码如下：
document.getElementById("div1").style.height=document.getElementById("div2").offsetHeight; //仅IE
document.getElementById("div1").style.height=document.getElementById("div2").offsetHeight+ "px"; //兼容FF、IE等
document.getElementById("div1").style.width=document.getElementById("div2").offsetWidth; //仅IE
document.getElementById("div1").style.width=document.getElementById("div2").offsetWidth+ "px"; //兼容FF、IE等