浏览器大小调整时获得相应的宽高值

最新推荐文章于 2020-12-03 18:50:37 发布

ccyyss

最新推荐文章于 2020-12-03 18:50:37 发布

阅读量908

点赞数

分类专栏： javascript HTML 文章标签：浏览器 xhtml input html action function

本文链接：https://blog.csdn.net/ccyyss/article/details/6028982

版权

javascript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title> 请调整浏览器窗口 </title> <meta http-equiv="content-type" content="text/html; charset=gb2312">

</meta></head>

<body>

<h2 align="center"> 请调整浏览器窗口大小 </h2><hr />

浏览器窗口的实际高度 : <input type="text" name="availHeight" size="4"/><br />

浏览器窗口的实际宽度 : <input type="text" name="availWidth" size="4"/><br />

</form>

<!--

var winWidth = 0;
var winHeight = 0;
function findDimensions() // 函数：获取尺寸
{
    // 获取窗口宽度
    if (window.innerWidth)
        winWidth = window.innerWidth;
    else if ((document.body) && (document.body.clientWidth))
        winWidth = document.body.clientWidth;

    // 获取窗口高度
    if (window.innerHeight)
        winHeight = window.innerHeight;
    else if ((document.body) && (document.body.clientHeight))
        winHeight = document.body.clientHeight;

    // 通过深入 Document 内部对 body 进行检测，获取窗口大小
    if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
    {
        winHeight = document.documentElement.clientHeight;
        winWidth = document.documentElement.clientWidth;
    }

    // 结果输出至两个文本框
    document.form1.availHeight.value= winHeight;
    document.form1.availWidth.value= winWidth;
}

findDimensions();

// 调用函数，获取数值
window.οnresize=findDimensions;
//-->

</script>

</body>

</html>