`
paulfzm
  • 浏览: 888423 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

Javascript 获取窗口的宽和高

JavaScript 
阅读更多

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

==============================================================

var getWindowInfo=function()
{
var scrollX=0,scrollY=0,width=0,height=0,contentWidth=0,contentHeight=0;
if(typeof(window.pageXOffset)=='number')
{
 scrollX=window.pageXOffset;
 scrollY=window.pageYOffset;
}
else if(document.body&&(document.body.scrollLeft||document.body.scrollTop))
{
 scrollX=document.body.scrollLeft;
 scrollY=document.body.scrollTop;
}
else if(document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop))
{
 scrollX=document.documentElement.scrollLeft;
 scrollY=document.documentElement.scrollTop;
}

if(typeof(window.innerWidth)=='number')
{
 width=window.innerWidth;
 height=window.innerHeight;
}
else if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight))
{
 width=document.documentElement.clientWidth;
 height=document.documentElement.clientHeight;
}
else if(document.body&&(document.body.clientWidth||document.body.clientHeight))
{
 width=document.body.clientWidth;
 height=document.body.clientHeight;
}

if(document.documentElement&&(document.documentElement.scrollHeight||document.documentElement.offsetHeight))
{
 if(document.documentElement.scrollHeight>document.documentElement.offsetHeight){
  contentWidth=document.documentElement.scrollWidth;
  contentHeight=document.documentElement.scrollHeight;
 }
 else
 {
  contentWidth=document.documentElement.offsetWidth;
  contentHeight=document.documentElement.offsetHeight;
 }
}
else if(document.body&&(document.body.scrollHeight||document.body.offsetHeight))
{
 if(document.body.scrollHeight>document.body.offsetHeight)
 {
  contentWidth=document.body.scrollWidth;
  contentHeight=document.body.scrollHeight;
 }else{
  contentWidth=document.body.offsetWidth;
  contentHeight=document.body.offsetHeight;
 }
}
else
{
 contentWidth=width;
 contentHeight=height;
}
 if(height>contentHeight)
 height=contentHeight;
 if(width>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

==============================================================

var getWindowInfo=function()
{
var scrollX=0,scrollY=0,width=0,height=0,contentWidth=0,contentHeight=0;
if(typeof(window.pageXOffset)=='number')
{
 scrollX=window.pageXOffset;
 scrollY=window.pageYOffset;
}
else if(document.body&&(document.body.scrollLeft||document.body.scrollTop))
{
 scrollX=document.body.scrollLeft;
 scrollY=document.body.scrollTop;
}
else if(document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop))
{
 scrollX=document.documentElement.scrollLeft;
 scrollY=document.documentElement.scrollTop;
}

if(typeof(window.innerWidth)=='number')
{
 width=window.innerWidth;
 height=window.innerHeight;
}
else if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight))
{
 width=document.documentElement.clientWidth;
 height=document.documentElement.clientHeight;
}
else if(document.body&&(document.body.clientWidth||document.body.clientHeight))
{
 width=document.body.clientWidth;
 height=document.body.clientHeight;
}

if(document.documentElement&&(document.documentElement.scrollHeight||document.documentElement.offsetHeight))
{
 if(document.documentElement.scrollHeight>document.documentElement.offsetHeight){
  contentWidth=document.documentElement.scrollWidth;
  contentHeight=document.documentElement.scrollHeight;
 }
 else
 {
  contentWidth=document.documentElement.offsetWidth;
  contentHeight=document.documentElement.offsetHeight;
 }
}
else if(document.body&&(document.body.scrollHeight||document.body.offsetHeight))
{
 if(document.body.scrollHeight>document.body.offsetHeight)
 {
  contentWidth=document.body.scrollWidth;
  contentHeight=document.body.scrollHeight;
 }else{
  contentWidth=document.body.offsetWidth;
  contentHeight=document.body.offsetHeight;
 }
}
else
{
 contentWidth=width;
 contentHeight=height;
}
 if(height>contentHeight)
 height=contentHeight;
 if(width>contentWidth)
 width=contentWidth;
 var rect=new Object();
 rect.ScrollX=scrollX;
 rect.ScrollY=scrollY;
 rect.Width=width;
 rect.Height=height;
 rect.ContentWidth=contentWidth;
 rect.ContentHeight=contentHeight;
 return rect;
}contentWidth)
 width=contentWidth;
 var rect=new Object();
 rect.ScrollX=scrollX;
 rect.ScrollY=scrollY;
 rect.Width=width;
 rect.Height=height;
 rect.ContentWidth=contentWidth;
 rect.ContentHeight=contentHeight;
 return rect;
}

分享到：
| CSS中控制换行的四种属性
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript获取窗口属性值

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

    javascript窗口宽高,鼠标位置,滚动高度(详细解析).docx

    ### JavaScript窗口宽高、鼠标位置、滚动高度详细解析 #### 一、概述 在Web开发中，经常需要获取浏览器窗口的尺寸、鼠标的位置以及页面滚动的距离等信息。这些信息对于响应式设计、交互效果实现等方面至关重要。本...

    javascript获取网页宽高方法汇总.docx

    本文将详细介绍几种使用 JavaScript 获取网页宽高的方法，并对比不同浏览器下的表现。 1. `document.body.clientWidth` 和 `document.body.clientHeight` 这两个属性分别返回网页可见区域的宽度和高度，不包括滚动...

    javascript获取页面各种高度

    在JavaScript编程语言中，开发者经常需要获取与网页和屏幕尺寸相关的数据，比如页面的可视区域、文档的实际大小以及用户屏幕的有效工作区等信息。这些数据对于优化网站布局、响应式设计以及实现某些交互功能至关重要...

    js获取网页宽高

    1. 获取浏览器窗口宽高： - `window.innerWidth` 和 `window.innerHeight` 属性可以分别获取浏览器窗口的宽度和高度，不包括滚动条。这两个属性能够反映用户当前视口的大小。 - 如果需要包含滚动条的尺寸，可以...

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

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

    JavaScript控制窗口1.pdf

    例如，`window.resizeTo(200, 300)`会将当前窗口的尺寸调整为宽200像素，高300像素。这个方法同样适用于调整弹出窗口的初始大小。 除了直接操作窗口，JavaScript还提供了`screen`对象来获取用户的屏幕信息。`screen...

    javascript实现浮动窗口传值

    这种效果可以通过监听用户的输入事件，然后利用AJAX（异步JavaScript和XML）从服务器获取匹配的建议数据。虽然现代应用中更倾向于使用Web API如Fetch API，但基本思路是相似的： ```javascript document....

    【JavaScript源代码】javascript实现简单滚动窗口.docx

    - 获取窗口的宽高、鼠标位置以及滚动条信息。 - 使用DIV模拟弹出窗口，并使其在页面滚动时保持可见。 总的来说，JavaScript的滚动窗口实现涉及了浏览器窗口操作、事件监听、定时器以及动态效果的创建。这些知识点...

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

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

    javascript获取网页宽高方法汇总

    不同的浏览器和不同的元素有着不同的属性可以用来获取宽高，本文就来汇总介绍javascript中获取网页宽高的方法。 首先，我们可以通过对document.body的各种属性进行访问来获取页面的宽高信息： - document.body....

    Javascript获取鼠标坐标的各种类型

    JavaScript获取鼠标坐标是Web开发中的常见需求，尤其在交互式应用和动态效果中扮演着重要角色。本篇文章将详细介绍各种JavaScript方法来获取鼠标位置，并解释它们的用途和差异。 首先，我们可以使用`event`对象来...

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

    首先，我们需要了解浏览器窗口的宽高是可以通过JavaScript对象属性获取的。在脚本中，我们通常使用document对象的documentElement属性来获取整个HTML文档的根元素，进一步通过offsetWidth属性获取当前浏览器窗口的...

    javascript经典特效---打开窗口控制.rar

    // 在当前尺寸上增加100像素宽和50像素高 ``` 5. `window.focus()` 和 `window.blur()`：这些方法用于控制窗口的焦点。`focus()`使窗口获取焦点，而`blur()`则使其失去焦点。 ```javascript window.focus(); //...

    js获取浏览器宽和高http://www.tiki-toki.com/

    这篇博客“js获取浏览器宽和高”可能详细阐述了如何利用JavaScript来获取这些信息。虽然提供的链接指向了一个错误的地址，但我们可以根据通常的方法来解释这个过程。 1. **浏览器窗口对象**： 在JavaScript中，`...

    javascript窗口宽高,鼠标位置,滚动高度(详细解析)

    在JavaScript中，获取窗口宽高、鼠标位置以及滚动高度是常见的需求，这对于页面布局、动态效果和用户交互有着重要作用。以下是对这些概念的详细解析： 1. **窗口宽高**： - `document.body.clientWidth` 和 `...

    Javascript获取窗口(容器)的大小及位置参数列举及简要说明

    Javascript获取窗口（容器）的大小及位置一系列的东西比较多，容易混淆，在这里列举及简要说明下： 属性方法说明： clientX 相对文档的水平坐标; clientY 相对文档的垂直坐标; offsetX 相对容器的水平坐标; offsetY ...

    javascript经典特效---检测窗口占显示器的比重.rar

    `ratioPercentage`就是窗口宽高比相对于屏幕宽高比的百分比，代表了窗口占显示器的比重。 4. **浏览器兼容性处理**：虽然大部分现代浏览器支持上述API，但老版本或非主流浏览器可能不兼容。因此，编写兼容性的代码...

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

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

Magicbox
Global site tag (gtag.js) - Google Analytics