`
paulfzm
  • 浏览: 875393 次
  • 性别: 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获取窗口（容器）的大小及位置一系列的东西比较多，容易混淆，在这里列举及简要说明下： 属性方法说明： clientX 相对文档的水平坐标; clientY 相对文档的垂直坐标; offsetX 相对容器的水平坐标; offsetY ...

    javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等

    主要介绍了javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等,需要的朋友可以参考下

    程序天下:JavaScript实例自学手册

    14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 ...

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

    主要介绍了JS根据浏览器窗口大小实时动态改变网页文字大小的方法,涉及JavaScript针对页面宽高的动态获取与元素样式动态运算的相关技巧,需要的朋友可以参考下

    《程序天下：JavaScript实例自学手册》光盘源码

    14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 ...

    IE与FF下javascript获取网页及窗口大小的区别详解

    在新定义出来的标准下 document.documentElement.clientHeight在IE和火狐里都能获取正确值，下面一篇文章详细介绍了获取各种浏览器可见窗口大小这方面的差别： [removed]function getInfo(){ var s = “”; s += ...

    通过JAVAScript实现页面自适应

    实现原理: 获取IE显示屏幕的宽高.确定哪些对象是绝对位置是固定的,那些是不固定的,哪些长宽是固定,然后象WIN FORM程序一样,根所软件界面的大小,进行设计相关对象的长宽,绝对位置等属性,但是在WEB上程序没有办法...

    JavaScript与JQUERY获取元素的宽、高和位置

    javascript中 ele.getBoundingClientRect()：获取一个元素相对于浏览器视口的的坐标（无论父元素定位与否），返回一个Object对象，该对象有6个属性：top/left/right/bottom/width/height。几乎所有浏览器都支持该...

    javascript获取网页各种高宽及位置的方法总结

    screen对象 获取屏幕的高宽（分辨率） ...获得窗口位置及大小 window.screenTop //窗口顶部距屏幕顶部的距离 window.screenLeft //窗口左侧距屏幕左侧的距离 window.innerWidth //窗口中可视区域(viewpoint)的

    JavaScript之浏览器对象_动力节点Java学院整理

    内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。 兼容性：IE<=8不支持。 // 可以调整浏览器窗口大小试试: alert('window inner size: ' + window.innerWidth + ' x ' + window....

    Layx web开发框架-其他

    特性：纯原生Javascript实现，不依赖任何第三方框架支持IE10+（含IE10）、Chrome、Firefox、Opera、Edge、Safari等主流浏览器支持多种窗口类型：文本窗口，页面窗口，窗口组，提示窗口，消息窗口，询问窗口，输入...

    【JavaScript源代码】如何利用JS检查元素是否在视口内.docx

    如何利用JS检查元素是否在视口内 　分享两个监测元素是否在视口内的...　获取浏览器窗口的宽高　const isElementVisible = (el) => {　const rect = el.getBoundingClientRect();　const vWidth = window.innerWidth ||

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    Chrome Frame 会把最新版的Chrome Webkit 内核和JavaScript 引擎注入到IE中, IE浏览器将获得Chrome的性能和功能 目录 摘要 I ABSTRACT II 专业名词清单 III 第一章 绪论 1 1.1 研究背景与意义 1 1.2国内外相关...

    Eclipse_Swt_Jface_核心应用_部分19

    2.2 直接获取SWT工具包 16 2.3 下载和安装Visual Editor 17 2.3.1 Visual Editor的下载 17 2.3.2 Visual Editor的安装 18 2.4 第一个SWT程序 19 2.4.1 创建SWT程序 19 2.4.2 编译和运行程序 20 2.5 本...

    ymprompt消息提示组件4.0【js插件弹出框美化版】

    getButtons()：获取当前弹出窗口的所有按钮对象，返回结果是一个对象集合(数组)。 如：var btnID=ymPrompt.getButtons()[0].id; //获取第一个按钮的id close()：关闭当前弹出的窗口 如：ymPrompt.close() 6、其他...

    js使用小技巧

    s += " 网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)"; s += " 网页正文全文宽："+ document.body.scrollWidth; s += " 网页正文全文高："+ document.body.scrollHeight; s += " 网页被卷去...

    jQuery 弹窗对话框拖动 非插件

    //浏览器当前窗口可视区域宽 //初始化 box_main $("#boxhandler").css({display:'block'}); //拖动对象的宽度和高度 var box_width=box_height = 0; box_width = $(".box_main").width(); box_height = $(...

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