浅谈javascript属性onresize

浅谈JavaScript中的onresize属性

在网页开发中，我们经常需要处理窗口大小变化的情况。这时，JavaScript中的onresize属性就派上了用场。本文将详细介绍如何使用onresize属性，希望对大家有所帮助。

我们需要获取屏幕宽度和高度。可以通过以下方式实现：

```javascript

var winWidth = 0;

var winHeight = 0;

function findDimensions() {

// 获取窗口宽度

if (windownerWidth) {

winWidth = windownerWidth;

} else if ((document.body) && (document.body.clientWidth)) {

winWidth = document.body.clientWidth;

}

// 获取窗口高度

if (windownerHeight) {

winHeight = windownerHeight;

} else if ((document.body) && (document.body.clientHeight)) {

winHeight = document.body.clientHeight;

}

if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {

winHeight = document.documentElement.clientHeight;

winWidth = document.documentElement.clientWidth;

}

// 输出结果至两个文本框

$("body").height(winHeight);

$("body").width(winWidth);

}

```

当窗口大小发生变化时，我们需要重新获取尺寸并更新页面元素。这时，我们可以将findDimensions函数赋值给onresize事件，以便在窗口大小变化时自动调用该函数：

```javascript

window.onresize = findDimensions;

```

这样，每当用户调整窗口大小时，findDimensions函数就会被调用，从而获取的窗口尺寸。这个属性特别适用于需要响应式设计的网页，能够根据窗口大小自动调整布局。

onresize属性是一个非常实用的工具，能够帮助我们轻松处理窗口大小变化的情况。希望本文的介绍能够对大家有所帮助。在实际开发中，可以根据具体需求对onresize属性进行更深入的研究和应用。

注：本文所介绍的内容仅供参考，具体实现方式可能会因浏览器和环境的不同而有所差异。在实际开发中，请根据实际情况进行调整和优化。