23、JavaScript 动态管理网页空间的实用技巧

JavaScript 动态管理网页空间的实用技巧

1. 确定网页区域

1.1 问题描述

想要测量当前网页窗口的宽度和高度。

1.2 解决方案

需要使用跨浏览器技术，以确保无论使用何种浏览器，结果都一致。以下是一个返回包含网页视口宽度和高度对象的函数示例：

function size()
{
  var wdth = 0;
  var hth = 0;
  if(!window.innerWidth)
  {
     wdth = (document.documentElement.clientWidth ?
document.documentElement.clientWidth :
document.body.clientWidth);
     hth = (document.documentElement.clientHeight ?
document.documentElement.clientWidth :
document.body.clientHeight);
  }
  else
  {
    wdth = window.innerWidth;
    hth = window.innerHeight;
  }
  return {width:wdth, height:hth};
}

获取视口大小对象后，可以使用以下代码访问宽度和高度：

var viewPort = size();
var w = viewPort.w