个性化阅读
专注于IT技术分析

JS窗口对象window – JavaScript教程

点击下载

上一章JavaScript教程请查看:JS DOM节点导航

在本教程中,你将了解JavaScript窗口对象。

窗口对象window

window对象表示一个包含DOM文档的窗口,窗口可以是主窗口、框架集或单独的框架,甚至可以是用JavaScript创建的新窗口。

如果你还记得前面的章节,我们在脚本中使用了alert()方法来显示弹出消息,这是window对象的一个方法。

在接下来的几章中,我们将看到window对象的一些新方法和属性,这些新方法和属性使我们能够做一些事情,比如提示用户获取信息、确认用户的操作、打开新窗口等等,这些都能让你在网页中添加更多的交互性。

计算窗口的宽度和高度

window对象提供innerWidth和innerHeight属性,用于查找浏览器窗口窗口的宽度和高度(以像素为单位),包括水平和垂直滚动条(如果呈现的话)。这是一个例子,显示窗口的当前大小的按钮点击:

<script>
function windowSize(){
    var w = window.innerWidth;
    var h = window.innerHeight;
    alert("Width: " + w + ", " + "Height: " + h);
}
</script>
 
<button type="button" onclick="windowSize();">计算窗口的宽度和高度</button>

但是,如果你想找出不包括滚动条的窗口的宽度和高度,你可以使用任意DOM元素的clientWidth和clientHeight属性(比如div),如下所示:

<script>
function windowSize(){
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
    alert("Width: " + w + ", " + "Height: " + h);
}
</script>
 
<button type="button" onclick="windowSize();">计算窗口的宽度和高度</button>

注意:document.documentElement对象表示文档的根元素,它是元素,而document.body对象表示元素,所有主流浏览器都支持这两种方式。

赞(0)
未经允许不得转载:srcmini » JS窗口对象window – JavaScript教程

评论 抢沙发

评论前必须登录!