`

js获取窗口的高宽度集锦

阅读更多
JS中获得窗口属性的方法
1。获得屏幕的分辨率:
screen.width
screen.height

2。获得窗口大小:
document.body.clientWidth
document.body.clientHeight

3。获得窗口大小(包含Border、Scroll等元素)
document.body.offsetWidth
document.body.offsetHeight 

var x = document.body.scrollLeft;
var y = document.body.scrollTop;

//获取屏幕宽度
    availWidth = parseInt(window.screen.availWidth);
    availHeight = parseInt(window.screen.availHeight);

//获取可见区域宽度 高度
    availWidth = parseInt(document.body.clientWidth);
    availHeight = parseInt(document.body.clientHeight);
       
可见区域高度:document.body.clientHeight
总高度:document.body.scrollHeight
可见区域宽度:document.body.clientWidth
总宽度:document.body.scrollWidth

js 窗口尺寸属性

clientHeight    获取对象的高度,不计算任何边距、边框、滚动条,但包括该对象的补白。 
  
clientLeft    获取   offsetLeft 属性和客户区域的实际左边之间的距离。    

clientTop    获取   offsetTop    属性和客户区域的实际顶端之间的距离。  
 
clientWidth    获取对象的宽度,不计算任何边距、边框、滚动条,但包括该对象的补白。
    
offsetHeight    获取对象相对于版面或由父坐标   offsetParent    属性指定的父坐标的高度。 
  
offsetLeft   获取对象相对于版面或由   offsetParent    属性指定的父坐标的计算左侧位置。  

offsetParent    获取定义对象   offsetTop    和   offsetLeft    属性的容器对象的引用。    

offsetTop    获取对象相对于版面或由   offsetTop    属性指定的父坐标的计算顶端位置。  
 
offsetWidth    获取对象相对于版面或由父坐标   offsetParent    属性指定的父坐标的宽度。    

offsetX    设置或获取鼠标指针位置相对于触发事件的对象的   x    坐标。    

offsetY    设置或获取鼠标指针位置相对于触发事件的对象的   y    坐标。
网页可见区域宽: 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;

分享到:
评论

相关推荐

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

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

    javascript获取窗口属性值

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

    JS获取浏览器的高度和宽度

    以下将详细介绍如何通过JavaScript获取这些信息,并探讨不同浏览器间可能存在的差异。 首先,我们可以使用`window.innerWidth`和`window.innerHeight`来获取浏览器窗口的总宽度和高度,包括工具栏和其他用户界面...

    javascript获取滚动条高度 页面宽度与高度

    ### JavaScript 获取滚动条高度、页面宽度与高度 在前端开发中,经常需要处理与浏览器窗口相关的操作,例如响应式设计、动态布局调整等。本文将详细介绍如何使用JavaScript来获取滚动条的高度、页面的宽度和高度。 ...

    javascript 获取网页高度宽度.pdf

    以下是一些关于如何使用JavaScript获取网页高度、宽度以及滚动位置的关键知识点。 1. **获取窗口滚动位置:** - `getScrollTop()` 函数用于获取当前页面滚动条的垂直偏移量。这个函数通过检查 `document....

    js获取浏览器高度和宽度值.pdf

    本文将详细解析如何通过JavaScript获取不同浏览器中的浏览器高度、宽度以及相关的一些其他尺寸信息。 1. **浏览器高度和宽度的获取** - `document.body.clientWidth` 和 `document.body.clientHeight`: 这两个...

    javascript获取网页高度宽度.rar

    总结,JavaScript获取网页高度和宽度的方法多种多样,可以根据具体需求选择合适的方式。了解这些知识对于提升网页交互体验和实现动态布局至关重要。在教育领域,理解并熟练掌握这些技术可以帮助学生更好地构建动态、...

    JS获取各种高度宽度1

    本文将深入探讨如何使用JavaScript获取各种高度和宽度,包括浏览器窗口滚动条的位置、元素的几何尺寸等关键概念。 首先,我们来看一下与鼠标位置相关的几个属性: 1. `pageX`:表示鼠标在页面上的位置,从页面左上...

    使用JS+CSS实现DIV层自适应高度和宽度

    我们了解了CSS基础知识、JavaScript基础知识、获取浏览器窗口的高度、实现DIV层自适应高度、实现DIV层自适应宽度和监听窗口resize事件等知识点。这些知识点将帮助我们更好地实现网页的自适应设计。

    js获取浏览器高度和宽度值(多浏览器)

    在JavaScript中,获取浏览器的高度和宽度是常见的需求,用于适应不同的屏幕尺寸和实现响应式设计。然而,由于不同浏览器之间的差异,获取这些值的方法并不统一。本文将详细介绍如何在多种浏览器环境下,包括IE、Fire...

    js(javascript)子窗口和父窗口交互

    ### JavaScript 子窗口与父窗口交互详解 在前端开发中,常常会遇到需要在一个窗口(通常称为父窗口)中打开另一个窗口(子窗口)的情况。这时,如何实现这两个窗口之间的数据交互便成了一个重要的问题。根据题目...

    JavaScript获取屏幕高度和宽度等信息

    JavaScript作为一种广泛应用于网页编程的语言,提供了多种方法来获取屏幕的高度、宽度以及其他相关信息。以下将深入探讨如何使用JavaScript来获取屏幕尺寸和其他关键信息。 ### 一、获取屏幕尺寸 #### 1.1 使用`...

    js 获取浏览器高度和宽度值(多浏览器)

    浏览器高度和宽度值获取方法汇总 在 Web 开发中,获取浏览器的高度和宽度值是非常重要的,因为它能够帮助我们更好地布局页面元素和实现响应式设计。然而,浏览器的高度和宽度值获取方法却因浏览器的不同而有所区别...

    JS,Jquery获取各种屏幕的宽度和高度

    #### JavaScript获取屏幕尺寸 在原生JavaScript中,可以通过多种方法来获取屏幕的宽度和高度,具体如下: 1. **`document.body.clientWidth`** 和 **`document.body.clientHeight`**: - 这两个属性分别用于获取...

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

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

    javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar

    本压缩包文件"javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar"包含了相关知识点的详细讲解,主要集中在JavaScript的DOM操作和窗口对象(Window)的属性与方法上。 1. **当前页面可视区域尺寸**...

    js获取屏幕分辨率的方法

    console.log('窗口宽度: ' + windowWidth); console.log('窗口高度: ' + windowHeight); // 获取滚动条位置 var scrollLeft = document.body.scrollLeft; var scrollTop = document.body.scrollTop; console...

    JS获取浏览器窗口大小

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

Global site tag (gtag.js) - Google Analytics