JavaScript 获取与设置 Div 宽高及浏览器兼容性处理

获取与设置 Div 宽高的兼容方案

在 Web 开发中，经常需要动态获取或修改 div 元素的高度和宽度，并确保代码在不同浏览器中表现一致。以下代码展示了具体的实现方式。

 
<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' 单位。

 
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等