获取页面可见区域,屏幕区域的尺寸

在设计网页时,常常需要考虑页面可见区域的宽度及高度,以便调整页面元素的相对位置. 例如创建2个div,使得高度上各占页面高度的50%,如何实现? 下面是一个页面区域的测试样例,参考即可实现:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> document.body对象, window对象尺寸信息</TITLE>
<META NAME="Author" CONTENT="许明会">
<META NAME="Keywords" CONTENT="clientHeight screen body">
<META NAME="Description" CONTENT="获取网页区域,屏幕区域">
<script type="text/javascript">
        function displayScreenSize()
        {
            //alert("heelo0");
            var bodyWidth                        =document.body.clientWidth;      //网页可见区域宽
            var bodyHeight                    =document.body.clientHeight;     //网页可见区域高

            var bodyWidthWithBorder    =document.body.offsetWidth;      //网页可见区域宽(包括边线的宽)
            var bodyHeightWithBorder    =document.body.offsetHeight;     //网页可见区域高(包括边线的宽)

            var bodyWidthWithScroll        =document.body.scrollWidth;      //网页正文全文宽
            var bodyHeightWithScroll        =document.body.scrollHeight;     //网页正文全文高     
            var bodyTopHeight                =document.body.scrollTop;        //网页被卷去的上边距
            var bodyLeftWidth                =document.body.scrollLeft;       //网页被卷去的左边距

            var windowLeftWidth            =window.screenLeft;              //网页正文部分左边距 
            var windowTopHeight            =window.screenTop;               //网页正文部分上边距

            var screenWidth                    =window.screen.width;            //屏幕分辨率的宽
            var screenHeight                    =window.screen.height;           //屏幕分辨率的高
            var screenAvailHeight            =window.screen.availHeight;      //屏幕可用工作区高度 
            var screenAvailWidth            =window.screen.availWidth;       //屏幕可用工作区宽度

            var info = "";
            info +="document.body.clientWidth:"+bodyWidth + "<br/>" ;
            info +="document.body.clientHeight:"+bodyHeight + "<br/>"
            info +="<br/>" 
            info +="document.body.offsetWidth:"+bodyWidthWithBorder + "<br/>"
            info +="document.body.offsetHeight:"+bodyHeightWithBorder + "<br/>"
            info +="<br/>" 
            info +="document.body.scrollWidth:"+bodyWidthWithScroll + "<br/>"
            info +="document.body.scrollHeight:"+bodyHeightWithScroll + "<br/>"
            info +="document.body.scrollTop:"+bodyTopHeight + "<br/>"
            info +="document.body.scrollLeft:"+bodyLeftWidth + "<br/>" 
            info +="<br/>" 
            info +="window.screenTop:"+windowLeftWidth + "<br/>"
            info +="window.screenLeft:"+windowTopHeight + "<br/>" 
            info +="<br/>" 
            info +="window.screen.width:"+screenWidth + "<br/>" 
            info +="window.screen.height:"+screenHeight + "<br/>"
            info +="window.screen.availHeight:"+screenAvailHeight + "<br/>"
            info +="window.screen.availWidth:" +screenAvailWidth + "<br/>"
            info +="<br/>" 

            document.all("divInfo").innerHTML = info;
         }
</script>
</HEAD>

<BODY onresize="displayScreenSize();">
<div id="divInfo">
</div>
</BODY>
</HTML>

转载于:https://www.cnblogs.com/flaaash/archive/2008/01/16/1041035.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/299897.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数学特级老师：数学除了做习题，这份140G的资料一定要收藏！

数学特级老师：数学除了做习题，这份140G的资料一定要收藏！

▲ 点击查看很多时候&#xff0c;我们把数学简单的归为算数&#xff0c;归为计算能力&#xff0c;但数学更多的是一种培养逻辑思维能力的方式。包括一元二次方程、或者向量&#xff0c;或者几何证明。而在我们传统的数学课上&#xff0c;更多的是通过做题来理解数学知识&…
阅读更多...
浅谈Redis五种数据结构的底层原理

浅谈Redis五种数据结构的底层原理

概念 Redis作为一个开源的用C编写的非关系型数据库&#xff0c;基于优秀的CRUD效率&#xff0c;常用于软件系统的缓存&#xff0c;其本身提供了以下五种数据格式&#xff1a; string&#xff1a;字符串list&#xff1a;列表hash&#xff1a;散列表set&#xff1a;无序集合zse…
阅读更多...
什么是事件冒泡？如何用jquery/js阻止事件冒泡？阻止冒泡有什么作用？小生来抛个砖。...

什么是事件冒泡？如何用jquery/js阻止事件冒泡？阻止冒泡有什么作用？小生来抛个砖。...

2019独角兽企业重金招聘Python工程师标准>>> 前言&#xff1a;有时候&#xff0c;当我们给一个外层 div 添加了一个‘click’事件&#xff0c;然而在内层的其他元素我们也为它添加了 ‘click’事件&#xff0c;那么当我们点击内层的元素时&#xff0c;外层的事件会响…
阅读更多...
在家做什么能让隔壁报警？| 今日最佳

在家做什么能让隔壁报警？| 今日最佳

全世界只有3.14 %的人关注了青少年数学之旅&#xff08;图源神店通缉令&#xff0c;侵权删&#xff09;
阅读更多...
暴库也不怕！EF Core加密存储数据

暴库也不怕！EF Core加密存储数据

针对某些数据字段要保存敏感数据的情况&#xff0c;比如银行卡号&#xff0c;我们需要使用一种机制保证存储到数据库的数据是加密的&#xff0c;避免数据泄露风险&#xff0c;但是又能够正常读取出来显示。下面我们用MySql演示如何操作。Demo创建一个ConsoleApp1&#xff0c;然…
阅读更多...
[网摘]CSS z-index 属性

[网摘]CSS z-index 属性

定位一直是WEB标准应用中的难点&#xff0c;如果理不清楚定位那么可能应实现的效果实现不了&#xff0c;实现了的效果可能会走样。如果理清了定位的原理&#xff0c;那定位会让网页实现的更加完美。 定位的定义&#xff1a; 在CSS中关于定位的内容是&#xff1a;position:relat…
阅读更多...
2007最受欢迎的十大Ajax技术文章

2007最受欢迎的十大Ajax技术文章

DeveloperWorks 中国网站 Ajax 技术资源中心在 2007 年上半年里发表了很多和 Ajax 相关的技术文章、教程、多媒体课堂和专栏。我们特地整理出 2007 上半年最受读者欢迎的内容&#xff0c;希望通过这个排行榜&#xff0c;您可以了解最新的 Ajax 技术热点&#xff0c;及与 Ajax 开…
阅读更多...
设计原则：色彩

设计原则：色彩

背景 最初接触《彩色UML》的时候就给了我很大的触动&#xff0c;可惜一致没有内化这种触动&#xff0c;直到最近一次看“老大”画了一个彩色的分析图&#xff0c;又突然的重现了这种触动&#xff0c;然后在一个梦里内化了这种冲动&#xff0c;第二天发现团队的“贴纸”和“水笔…
阅读更多...
中国移动云能力中心 Iaas 产品部软件开发工程师陈焱山：社区始于连接，也成就于连接...

中国移动云能力中心 Iaas 产品部软件开发工程师陈焱山：社区始于连接，也成就于连接...

社区始于连接&#xff0c;也成就于连接——陈焱山ApacheCon 是 Apache 软件基金会&#xff08;ASF&#xff09;的官方全球系列大会。作为久负盛名的开源盛宴&#xff0c;ApacheCon 在开源界备受关注&#xff0c;也是开源运动早期的知名活动之一。早在 1998 年&#xff0c;在 AS…
阅读更多...
ZGY的Excel特征提取器初期版本完成

ZGY的Excel特征提取器初期版本完成

其实这个初期版本已经基本上把他要的功能都实现了&#xff0c;呵呵 他的要求是批量转Excel&#xff0c;把所有用黄色标出的单元格所在的列拷到一个新文件中 其实底层很简单&#xff0c;界面做了倒有一会&#xff0c;还是一如既往的喜欢SWT啊~ 附上Java利用Apache POI进行Excel文…
阅读更多...
阿里大佬推荐初学者练习的 Java 开源项目

阿里大佬推荐初学者练习的 Java 开源项目

对于JAVA的新手来说&#xff0c;需要结合着相关书籍的学习和开源项目一起&#xff0c;才能达到比较好的效果。 在此推荐一些轻量级适合入门的JAVA开源项目&#xff0c;希望对题主的学习有所帮助。 项目名称&#xff1a;springboot-learning-example项目简介&#xff1a;sprin…
阅读更多...
真·抬头发票！| 今日最佳

真·抬头发票！| 今日最佳

全世界只有3.14 %的人关注了青少年数学之旅&#xff08;图源迷惑行为大赏&#xff0c;侵权删&#xff09;
阅读更多...
老歌新唱--使用VB6开发的ActiveX实现.NET程序的混淆加密

老歌新唱--使用VB6开发的ActiveX实现.NET程序的混淆加密

代码下载地址&#xff1a;http://files.cnblogs.com/wuhuacong/VBActiveX.rar 由于存在一下几种特点&#xff1a;1、.NET程序反编译容易&#xff0c;而使用一些混淆工具会导致有些程序不能运行2、VB6开发ActiveX控件&#xff0c;那叫一个快&#xff0c;VB代码也不是很容易被反编…
阅读更多...
设计模式之适配器

设计模式之适配器

适配器模式介绍介绍适配器模式的作用就是把原本不兼容的接口&#xff0c;通过适配修改到统一的过程&#xff0c;使得用户方便使用。在实际工作中&#xff0c; 有时候我们需要把各个业务线的各种类型服务做统一的包装&#xff0c;再对外提供接口进行使用。适配器模式要解决的主要…
阅读更多...
qsort（bsearch,lsearch）—标准库排序，查找

qsort（bsearch,lsearch）—标准库排序，查找

2019独角兽企业重金招聘Python工程师标准>>> //对字符串排序 #include<iostream> #include<cstdlib> #include<string.h> #define N 8 using namespace std; int compare(const void *a,const void *b); int main(void) {int i;char s[8][10] {&q…
阅读更多...
中科大博士写外挂被抓，非法牟利300多万！

中科大博士写外挂被抓，非法牟利300多万！

全世界只有3.14 %的人关注了青少年数学之旅近日&#xff0c;扬州警方破获一起中科大博士伙同他人在网上销售外挂软件非法牟利超过 300 万的案件。2016年6月&#xff0c;北京某游戏公司发现网上有款名为“冰焰”的外挂软件大量销售&#xff0c;给他们的网游造成了巨大损失这款外…
阅读更多...
C# WPF MVVM项目实战(进阶②)

C# WPF MVVM项目实战(进阶②)

这篇文章还是在之前用Caliburn.Micro搭建好的框架上继续做的开发&#xff0c;今天主要是增加了一个用户窗体ImageProcessView&#xff0c;然后通过Treeview切换选择项之后在界面显示不同效果的图片。01—重要的知识点本篇内容基于CM框架编写&#xff0c;涉及以下知识点&#xf…
阅读更多...
浏览器要是能这么做就好了

浏览器要是能这么做就好了

原文地址&#xff1a;http://www.laaan.cn/?p994 之前和搜狗浏览器的开发团队做过一些合作。主要是用户教育方便的事。需要他们给我开几个接口&#xff0c;让flash与浏览器通讯。都是很谨慎的。不过后来想一想&#xff0c;要是搜狗浏览器能开放一些接口供js或flash调用该有多好…
阅读更多...
腾讯架构师讲解Java接口的继承与抽象类

腾讯架构师讲解Java接口的继承与抽象类

在实施接口中&#xff0c;我们利用interface语法&#xff0c;将interface从类定义中独立出来&#xff0c;构成一个主体。interface为类提供了接口规范。 在继承中&#xff0c;我们为了提高程序的可复用性&#xff0c;引入的继承机制。当时的继承是基于类的。interface接口同样可…
阅读更多...
说说大型高并发高负载网站的系统架构

说说大型高并发高负载网站的系统架构

By Michael 转载请保留出处&#xff1a;俊麟 Michael’s blog (http://www.toplee.com/blog/?p71) Trackback Url : http://www.toplee.com/blog/wp-trackback.php?p71 我在CERNET做过拨号接入平台的搭建&#xff0c;而后在Yahoo&3721从事过搜索引擎前端开发&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023