首页 web前端 js教程 Javascript实现获取窗口的大小和位置代码分享_javascript技巧

Javascript实现获取窗口的大小和位置代码分享_javascript技巧

May 16, 2016 pm 04:29 PM
javascript 位置 大小 窗口

在Javascript中可以使用OuterWidth,OuterHeight 获取浏览器的大小.用 innerWidth,innerHeight 来获取窗口的大小(除去浏览器边框部分)。对于IE6 及之前版本,要区分是标准模式,还是混杂模式。标准模式使用document.documentElement.clientWidth,document.documentElement.clientHeight;混杂模式使用document.body 的clientWidth,clientHeight。

复制代码 代码如下:

     (function () {
         var pageWidth = window.innerWidth;
         var pageHeight = window.innerHeight;
         var broswerWidth = window.outerWidth;
         var broswerHeight = window.outerHeight;
         alert(pageWidth + " " + pageHeight);
         alert(broswerWidth + " " + broswerHeight);
         if (typeof pageWidth != "number") {
             if (document.compatMode == "CSS1Compat") {  //The standard mode
                 pageWidth = document.documentElement.clientWidth;
                 pageHeight = document.documentElement.clientHeight;
             } else {
                 pageWidth = document.body.clientWidth;
                 pageHeight = document.body.clientHeight;
             }
         } 
     })();

获取窗口的位置:IE,chrome,Safari,使用screenLeft,screenTop 来获取窗口距离屏幕左边和屏幕上边的位置。而Firefox不支持此属性,Firefox使用screenXP,screenY 达到同样的效果。

复制代码 代码如下:

    (function btnFun() {
        var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft :
            window.screenX;
        var topPos = (typeof window.screenTop == "number") ? window.screenTop :
                         window.screenY;
        alert(leftPos + " " + topPos);
        //alert(window.screenLeft+" "+window.screenTop);
    })();
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

详细介绍如何在Windows 11上打开环境变量设置 详细介绍如何在Windows 11上打开环境变量设置 Dec 30, 2023 pm 06:07 PM

环境变量功能是系统中的配置程序运行必备工具,但是在最新的win11系统中还有许多的用户不知道怎么设置打开,下面就给你们带来了win11环境变量打开位置详细介绍,快来一起学习操作一下吧。win11环境变量在哪:1、首先输入“win+R”,打开运行框。2、然后在里面输入命令:controlsystem。3、在打开的系统信息界面中,选择左侧菜单的“高级系统设置”。4、随后在打开的“系统属性”窗口选择下方的“环境变量”选项。5、最后在打开的环境变量中,即可根据需求进行相关的设置。

Win11的启动路径以及如何打开它 Win11的启动路径以及如何打开它 Jan 03, 2024 pm 11:13 PM

每一个Windows系统都有一个启动路径,如果你在其中添加了文件或软件,就会在开机的时候打开它。不过不少朋友不知道win11启动路径在哪里,其实我们只需要进入C盘的对应文件夹就可以了。win11启动路径:1、双击打开“此电脑”2、直接将该路径“C:\ProgramData\Microsoft\Windows\StartMenu\Programs\Startup”粘贴进路径框。3、这里就是win11启动路径了,如果我们要开机打开文件就可以将文件放进来。4、如果你根据这个路径进不来,可能是被隐藏了。

谷歌浏览器怎么设置每次打开都是新的窗口 谷歌浏览器怎么设置每次打开都是新的窗口 Mar 06, 2024 pm 06:19 PM

谷歌浏览器怎么设置每次打开都是新的窗口?狠毒用户喜欢使用谷歌浏览器办公或者学习,这款浏览器具有安全、快速、便捷的特点,不同的用户使用浏览器的喜好不同,一些用户喜欢打开谷歌浏览器就是新的标窗口,方便快速搜索,那么如何设置呢。接下来小编就给大家带来谷歌浏览器每次打开都是新的窗口设置教程,感兴趣的朋友快来学习一下吧。谷歌浏览器每次打开都是新的窗口设置教程1、将电脑桌面上的谷歌浏览器双击打开之后,点击右上角的【三个点】的图标位置进行单击。2、找到【设置】这个选项进入到页面中(如图所示)。3、进入到谷歌浏

了解pip安装包存储的位置和结构 了解pip安装包存储的位置和结构 Jan 18, 2024 am 08:23 AM

深入了解pip安装的包存放位置,需要具体代码示例pip是Python语言常用的包管理工具,用于方便地安装、升级和管理Python包。在使用pip安装包时,它会自动从PyPI(Python包索引)下载对应的包文件,并将其安装到指定的位置。那么,pip安装的包究竟存放在哪里呢?这是很多Python开发者都会遇到的问题。本文将深入探讨pip安装的包存放位置,并提供

如何在VirtualBox中增加磁盘大小[指南] 如何在VirtualBox中增加磁盘大小[指南] Mar 17, 2024 am 10:10 AM

我们经常遇到预定义磁盘大小没有空间容纳更多数据的情况?如果您在稍后阶段需要更多的虚拟机硬盘空间,则必须扩展虚拟硬盘和分区。在这篇文章中,我们将看到如何在VirtualBox中增加磁盘大小。增加VirtualBox中的磁盘大小重要的是要注意,您可能希望在执行这些操作之前备份您的虚拟硬盘文件,因为总是有可能出错。有备份总是一个好的做法。然而,该过程通常运行良好,请确保在继续之前关闭您的机器。有两种方法可以增加VirtualBox中的磁盘大小。使用图形用户界面扩展VirtualBox的磁盘大小使用CL

星穹铁道克劳克影视乐园折纸小鸟位置 星穹铁道克劳克影视乐园折纸小鸟位置 Mar 27, 2024 pm 11:51 PM

星穹铁道克劳克影视乐园总共有20只折纸小鸟,有很多玩家不知道克劳克影视乐园折纸小鸟在哪,小编已经把每只折纸小鸟位置全部都总结出来了,帮助大家进行寻找,具体内容一起来看看这篇克劳克影视乐园折纸小鸟位置最新汇总。崩坏星穹铁道攻略大全星穹铁道克劳克影视乐园折纸小鸟位置1、克劳克影视乐园一层2、克劳克影视乐园二层

快手发布于哪里怎么改位置?已经上传的视频怎么添加位置呢? 快手发布于哪里怎么改位置?已经上传的视频怎么添加位置呢? Mar 21, 2024 pm 06:00 PM

作为国内知名的短视频平台,快手为众多创作者提供了展示才华和分享生活的机会。在上传视频时,一些新手创作者可能会困惑于如何更改视频发布位置。本文将为您介绍快手视频发布位置的更改方法,并分享一些快手视频发布的技巧,帮助您更好地利用这个平台展示自己的作品。一、快手发布于哪里怎么改位置?1.发布界面:在快手APP中,点击“发布”按钮,进入视频发布界面。2.位置信息:在发布界面,有“位置”一栏,点击进入位置选择界面。3.更改位置:在位置选择界面,点击“定位”按钮,可以查看当前所在位置。如需更改位置,点击“位

高德地图家的位置怎么改 高德地图家的位置怎么改 Feb 27, 2024 pm 07:31 PM

高德地图作为我们日常出行的得力助手,不仅提供了精准的导航服务,还人性化的让用户们直接确定自己“家的位置”。方便每次查询自己的回家路线。但是有的时候我们家的位置也需要更新,所以究竟该如何在高德地图中轻松修改“家的位置”呢?接下来,就跟随小编的攻略,一起来学习修改方法吧!高德地图家的位置怎么改答案:【高德地图】-【设置】-【三点图标】-【修改地点】-【设置地点】-【设为家庭住址】。具体步骤:1、首先打开高德地图软件,进入到首页中后我们往上滑动之后找到回家之后点击【设置】;2、然后在设置的页面中我们可

See all articles