`

JS中获取各种窗口大小

阅读更多
网页可见区域宽:document.body.clientWidth   ­
     网页可见区域高:document.body.clientHeight   ­

     网页可见区域宽:document.body.offsetWidth       (包括边线的宽)   ­

     网页可见区域高:document.body.offsetHeight       (包括边线的宽)   ­

     网页正文全文宽:document.body.scrollWidth   ­

     网页正文全文高:document.body.scrollHeight   ­

     网页被卷去的高:document.body.scrollTop   ­

     网页被卷去的左:document.body.scrollLeft   ­

     网页正文部分上:window.screenTop   ­

     网页正文部分左:window.screenLeft   ­

     屏幕分辨率的高:window.screen.height   ­

     屏幕分辨率的宽:window.screen.width   ­

     屏幕可用工作区高度:window.screen.availHeight   ­

     屏幕可用工作区宽度:window.screen.availWidth

var t=""; ­

t+="\n网页可见区域宽:"+ document.body.clientWidth;   ­

t+="\n网页可见区域高:"+ document.body.clientHeight;   ­

t+="\n网页可见区域宽:"+ document.body.offsetWidth;//       (包括边线的宽)   ­

t+="\n网页可见区域高:"+ document.body.offsetHeight;//       (包括边线的宽)   ­

t+="\n网页正文全文宽:"+ document.body.scrollWidth;   ­

t+="\n网页正文全文高:"+ document.body.scrollHeight;   ­

t+="\n网页被卷去的高:"+ document.body.scrollTop;   ­

t+="\n网页被卷去的左:"+ document.body.scrollLeft;   ­

t+="\n网页正文部分上:"+ window.screenTop;   ­

t+="\n网页正文部分左:"+ window.screenLeft;   ­

t+="\n屏幕分辨率的高:"+ window.screen.height;   ­

t+="\n屏幕分辨率的宽:"+ window.screen.width;   ­

t+="\n屏幕可用工作区高度:"+ window.screen.availHeight;   ­

t+="\n屏幕可用工作区宽度:"+ window.screen.availWidth; ­

t+="\n鼠标X位置:"+ event.clientX; ­

t+="\n鼠标Y位置:"+ event.clientY; ­

注意,在使用了W3C标准的网页中,document.body.scrollTop和document.body.scrollLeft会失效,这时要用document.documentElement.scrollTop 和document.documentElement.scrollLeft


分享到:
评论

相关推荐

    js 获取浏览器窗口大小

    js获取浏览器窗口事件,获取改变后的大小 下载后评论可返回1分

    JS获取浏览器窗口大小

    ### JS 获取浏览器窗口大小 在前端开发中,经常需要获取浏览器窗口的大小,以便于根据不同的屏幕尺寸调整页面布局或实现响应式设计。本文将详细介绍如何使用JavaScript来获取浏览器窗口的宽度、高度以及相关的属性...

    关于获取各种浏览器可见窗口大小

    ### 关于获取各种浏览器可见窗口大小的知识点 在前端开发中,经常需要获取浏览器的可见窗口大小以及其他相关信息,以便能够根据不同的设备和浏览器环境来优化网页布局与用户体验。本文将详细解析如何通过JavaScript...

    js获取浏览器窗口宽度、高度 判断浏览器窗口大小改变

    js获取浏览器窗口宽度、高度 判断浏览器窗口大小改变

    javascript获取窗口属性值

    ### JavaScript 获取窗口属性值 在Web开发中,JavaScript是一种广泛使用的编程语言,它能够与HTML和CSS紧密结合,为网页提供动态交互能力。其中一项常见需求是获取浏览器窗口的各种属性值,比如宽度、高度等,这...

    JS根据浏览器窗口大小实时动态改变网页文字大小的方法

    本文主要介绍如何使用JavaScript实现根据浏览器窗口大小动态调整网页文字大小的功能。该技术在实现网页响应式设计中具有重要意义,允许网页内容在不同尺寸的屏幕设备上都能保持良好的可读性和布局适应性。 首先,...

    js实时获取窗口大小变化的实例代码

    本文将详细解释如何使用JavaScript实现实时获取窗口大小变化的功能,并通过实例代码演示这一过程。 首先,要了解的是,浏览器提供的window对象具有一个resize事件,当窗口尺寸变化时,会触发这个事件。我们可以通过...

    JavaScript 获取浏览器的显示区域大小信息

    ### JavaScript 获取浏览器的显示区域大小信息 在网页开发过程中,获取浏览器显示区域的大小是非常重要的一个环节,这对于响应式设计、动态布局调整等场景尤为重要。本文将详细介绍如何使用JavaScript来获取浏览器...

    js实现浏览器窗口大小被改变时触发事件的方法

    在web开发中,调整浏览器窗口大小是常见的用户操作之一,JavaScript提供了一种机制,允许我们在窗口大小变化时执行特定的代码。这篇文章的重点是介绍如何使用JavaScript中的window对象的onresize事件来实现当浏览器...

    JS获取各种浏览器窗口大小的方法

    常用:JS 获取浏览器窗口大小 代码如下:// 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; ...

    动态设置窗口位置和大小

    // 设置窗口大小 window.moveTo((screen.width - 640) / 2, (screen.height - 480) / 2); // 设置窗口位置 ``` 在Qt框架下,我们可以使用`move`和`resize`函数: ```c++ #include #include int main(int argc,...

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

    在探讨如何使用JavaScript获取浏览器窗口的大小和位置之前,需要了解几个关键的DOM属性,这些属性可以帮助我们收集到窗口的各种尺寸信息以及它在屏幕上的位置。这些属性包括了我们日常开发中可能经常用到的window....

    JS获取浏览器窗口大小获取屏幕,浏览器,网页高度宽度[文].pdf

    在JavaScript中,获取浏览器窗口、屏幕以及网页的高度和宽度是常见的需求,这在网页布局、动态调整元素尺寸、响应式设计等方面非常有用。以下是一些关键的JavaScript属性和方法,用于获取这些信息: 1. **网页可见...

    js窗口拖拽(改变大小,最小化,最大化,还原,关闭).zip

    计算并更新窗口大小的逻辑,以实现缩放功能;以及实现窗口状态切换(最小化、最大化、还原和关闭)的逻辑。 知识点详解: 1. **JavaScript事件处理**:项目中的JavaScript代码会监听用户与窗口的交互,例如通过`...

    根据窗口大小改变窗口的颜色

    函数内部可以获取窗口的新尺寸,并根据尺寸调整颜色: ```python import tkinter as tk def change_color(event): width, height = event.width, event.height # 根据宽度和高度调整颜色,这里仅做示例,实际应...

    JS控制网页背景随窗口大小自动适应

    ### JS控制网页背景随窗口大小自动适应 #### 知识点概述 本文将详细介绍如何使用JavaScript来实现网页背景图片随浏览器窗口大小的变化而自动调整尺寸的功能。这一技术在响应式设计中非常实用,能够让网站在不同...

    js中打开新窗口的各种方法.doc

    第一个按钮使用`window.open`直接设置了窗口大小;第二个按钮先打开窗口,然后通过`moveTo`和`resizeTo`调整位置和大小;第三个按钮使用了`showModalDialog`,这是一个模态对话框,不允许用户与当前窗口交互,直到...

    自适应窗口大小背景.zip

    本案例的"自适应窗口大小背景.zip"文件提供了一种实现这一目标的方法,主要涉及JavaScript(JS)和CSS的技术应用。我们将深入探讨如何通过JavaScript和CSS实现这种自适应背景效果,并结合"jiaoben18468"这个文件中的...

    取得窗口大小 兼容所有浏览器的js代码.docx

    综上所述,为了在所有浏览器中准确地获取窗口大小和位置,我们需要对`window.innerWidth`、`window.innerHeight`、`window.screenLeft`以及`window.screenTop`等属性进行兼容性处理。这样的代码能够确保在不同浏览器...

Global site tag (gtag.js) - Google Analytics