更改窗口大小 and 窗口size属性

最新推荐文章于 2020-09-24 21:33:13 发布

kyouken2007

最新推荐文章于 2020-09-24 21:33:13 发布

阅读量1.8k

点赞数

分类专栏： JavaScript 文章标签： javascript 浏览器工作 html function css

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

用javascript设计可以随窗口大小变动而更改的界面

最近一个项目中，需要做这样一件事情：
浏览器窗口中高和宽需要安百分比显示一个界面，当用户改变窗口大小时，界面也会随着进行变化，也就是说，不会出现任何的滚动条。

横向的html只需要使用百分比就可以搞定了，主要是纵向，因为浏览器纵向是可以无限长的，所以需要通过javascript来获取屏幕当前空白工作区域的高度，然后设置界面的高度。我的方法如下：

<html>
<head>
<script>
function init()
{
    var windowWidth, windowHeight;
    if (self.innerHeight) { // all except Explorer
        windowWidth = self.innerWidth;
        windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
        windowWidth = document.documentElement. clientWidth;
        windowHeight = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
        windowWidth = document.body. clientWidth;
        windowHeight = document.body.clientHeight;
    }


    var firstsheet=document.styleSheets[0];
    var therules=firstsheet.cssRules? firstsheet.cssRules: firstsheet.rules;
    var treeHeight = windowHeight - 238;
    therules[0].style.height= treeHeight + "px";
}
</script>
</head>
<body οnresize="init();">
<script language="javascript" type="text/javascript">
init();
</script>
</body>

当载入页面或onresize事件被激发后，执行 init ，取得屏幕高度参数，然后重新设定css 高度。

这个代码在ie/firefox都可以正常的执行。

这段代码我再调适的时候遇到过一些问题。当鼠标拖动页面最小和最大的时候，会死循环，原因不明。

在javascript中得到当前窗口的高和宽
<body><SCRIPT LANGUAGE="JavaScript">
var s = "";
s += "/r/n网页可见区域宽："+ document.body.clientWidth;
s += "/r/n网页可见区域高："+ document.body.clientHeight;
s += "/r/n网页可见区域宽："+ document.body.offsetWidth +" (包括边线的宽)";
s += "/r/n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
s += "/r/n网页正文全文宽："+ document.body.scrollWidth;
s += "/r/n网页正文全文高："+ document.body.scrollHeight;
s += "/r/n网页被卷去的高："+ document.body.scrollTop;
s += "/r/n网页被卷去的左："+ document.body.scrollLeft;
s += "/r/n网页正文部分上："+ window.screenTop;
s += "/r/n网页正文部分左："+ window.screenLeft;
s += "/r/n屏幕分辨率的高："+ window.screen.height;
s += "/r/n屏幕分辨率的宽："+ window.screen.width;
s += "/r/n屏幕可用 工作区高度："+ window.screen.availHeight;
s += "/r/n屏幕可用工作区宽度："+ window.screen.availWidth;
alert(s);
</SCRIPT>

kyouken2007

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
更改窗口大小 and 窗口size属性

用javascript设计可以随窗口大小变动而更改的界面最近一个项目中，需要做这样一件事情：浏览器窗口中高和宽需要安百分比显示一个界面，当用户改变窗口大小时，界面也会随着进行变化，也就是说，不会出现任何的滚动条。横向的html只需要使用百分比就可以搞定了，主要是纵向，因为浏览器纵向是可以无限长的，所以需要通过javascript来获取屏幕当前空白工作区域的高度，然后设置界面的高度。我的方法如下
复制链接

扫一扫