当前位置: 首页 > 编程日记 > 正文

Javascript获取页面、屏幕尺寸大小参数

Javascript获取获取屏幕、浏览器窗口 ,浏览器,网页高度、宽度的大小
网页可见区域宽: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

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE,FireFox 差异如下:

IE6.0、FF1.06+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5:
clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

网页可见区域宽: 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

div.style.top:相对于div所在的元件的顶部距离

-------------------

技术要点
本节代码主要使用了Document对象关于窗口的一些属性,这些属性的主要功能和用法如下。

要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在 IE下需要深入Document内部对body进行检测;在DOM环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

浏览器大小调整事件

window.οnresize=funName;//当浏览器大小发生变化时调用funName函数

原文链接:http://edu.codepub.com/2011/0111/28723.php

转载于:https://www.cnblogs.com/rushoooooo/archive/2011/05/01/2033670.html

相关文章:

linux 进入单用户模式修改root密码

Redhat系统Root密码的修改 一台双系统的机器,忘记redhat 的root密码了。 一。相关方法如下:1. 开机在出现grub画面,按e键 2. 用上下键选中第二项(类似于kernel /boot/vmlinuz-2.4.18-14 ro rootLABEL/) 然后按e键编辑 3. 空格single结果如下&#…

精通Groovy

https://www.ibm.com/developerworks/cn/education/java/j-groovy/j-groovy.html https://juejin.im/entry/59bf6376f265da066b394310 groovy for eclipse插件wiki https://github.com/groovy/groovy-eclipse/wiki 转载于:https://www.cnblogs.com/hihtml5/p/8434040.html

C和指针-函数

一个函数的通常形式: type function_name(参数) { 代码块; } 在参数里面:变量和类型声明 写空函数备用! k&R C中,参数声明不一样 函数声明: 函数原型先写 缺省认定:声明函数原型…

网页生成pdf文件

在此介绍 两种方法。 一个是asppdf;一个是abcpdf。 都是收费的组件。需要注册码,但是也有破解的和trial的。 asppdf:http://www.persits.com/asppdf.exe (可以在http://www.asppdf.com/download.html输入一个email获取一个序列号&#xff…

vue中把props中的值赋值给data

父组件 <messageForm createMsgCallback"addCreateMsg" :name"sendForm.name"></messageForm> 子组件 props:{name:{type:String} }, computed: {computedName(){return this.name}},watch:{name:function(val) {console.log(val);this.sen…

Webservices,remoting,WCF比较一下

remoting用的少&#xff0c;再仔细琢磨

eclipse常用插件介绍

1. 测试覆盖率工具&#xff1a;EclEmma https://www.cnblogs.com/Ming8006/p/5811425.html 2. 单元测试系列&#xff1a;如何使用JUnitJaCoCoEclEmma完成单元测试 https://www.cnblogs.com/zishi/p/6726664.html转载于:https://www.cnblogs.com/yelongsan/p/8436281.html

SQL Server基础操作(此随笔仅作为本人学习进度记录七 !--存储过程)

存储过程存储过程分为系统存储过程和自定义存储过程存储过程通过将处理数据的程序从客户端应用程序移动到服务器,存储过程是放在服务器上的&#xff0c;通过客户端下达指令调用存储过程的时候&#xff0c;这个过程是在服务器上发生的&#xff0c;自然就不会占用网络的带宽就会降…

JS基础类型和引用类型

JS基础类型和引用类型脑图

(转)WinForm控件使用文章收藏整理完成

http://home.cnblogs.com/group/topic/29829.html 对C# WinForm开发系列收集的控件使用方面进行整理, 加入了一些文章, 不断补充充实, 完善这方面. 基础 - 常用控件 C# WinForm开发系列 - CheckBox/Button/Label/ProgressBar WinForm下CheckedListBox的数据绑定 Winform 下…

Hdu 2795

Billboard 题型&#xff1a;线段树 描述&#xff1a;板子h*w上贴1*w0的广告&#xff0c;从左上角贴起&#xff0c;询问广告所在的row。 思路&#xff1a;将h分段&#xff0c;结构中增加w域&#xff0c;保存区间[a,b]所以行剩余可贴的最大量。 代码 //1828MS 6340K#include <…

认识一下Kotlin语言,Android平台的Swift

今天在CSDN首页偶然看到一个贴子JetBrains正式公布Kotlin 1.0&#xff1a;JVM和Android上更好用的语言 看完后&#xff0c;感觉Kotlin语法非常简洁&#xff0c;有一系列动态语言的特点&#xff0c;Lambda表达式。高阶函数。闭包&#xff0c;甚至有静态语言的类型检查&#xff…

php开发面试题---php面向对象详解(对象的主要三个特性)

php开发面试题---php面向对象详解&#xff08;对象的主要三个特性&#xff09; 一、总结 一句话总结&#xff1a; 对象的行为&#xff1a;可以对 对象施加那些操作&#xff0c;开灯&#xff0c;关灯就是行为。 对象的形态&#xff1a;当施加那些方法是对象如何响应&#xff0c;…

端口01 - 零基础入门学习汇编语言67

第十四章&#xff1a;端口01 让编程改变世界 Change the world by program 引言 CPU可以直接读写3 个地方的数据 &#xff08;1&#xff09;CPU 内部的寄存器&#xff1b; &#xff08;2&#xff09;内存单元&#xff1b; &#xff08;3&#xff09;端口。 这一章&#xff0c…

基于SSM实现二手交易系统

1、使用技术 SpringSpring MVCMybatisMysqlhtmljscss等 2、功能 用户注册用户登录物品推荐物品分类物品搜索物品发布物品详情购买商品我的主页等等 3、效果 4、视频介绍

RemoteFX原理简介

这几天&#xff0c;Windows 7 SP1的BETA版公开测试了&#xff0c;里面有一个功能&#xff0c;RemoteFX&#xff0c;算是softice比较期待的一个功能&#xff0c;总算是揭开了她的神秘面纱&#xff0c;横空出世&#xff0c;来到你身边。它的发布&#xff0c;对于微软桌面虚拟化解…

bzoj1079: [SCOI2008]着色方案(DP)

1079: [SCOI2008]着色方案 题目&#xff1a;传送门 题解&#xff1a; DP刚神多年前讲过的一道神题。 二话不说&#xff0c;上来就是一个六维数组&#xff1a;F[i][a][b][c][d][e]//表示上一次涂的颜色是还剩下i次可用的&#xff0c;a~e表示不同次数的颜色种数。 次数一样的颜色…

dedecms部分文章出现读取附加信息出错的解决办法

问题&#xff1a; 估计是新版本开发的时候&#xff0c;没有考虑旧版&#xff0c;文章内容为空的新闻&#xff0c;新版不在允许文章内容为空的新闻&#xff0c;这样旧版的内容为空的新闻升级后将无法再编辑。 解决&#xff1a;你可以对如下文件进行如下修改&#xff1a;article_…

程序员的周末:纯野的一天

牵强的标题自己写上这个标题都觉得挺牵强的。首先&#xff0c;我算不上是一个纯粹意义上的程序员了。虽然上了一个多月的班&#xff0c;但对于这份职业到底做什么我都还不是特别的清楚。每天做着一些类似文秘的工作&#xff0c;又类似技术支持的工作&#xff0c;还有点类似程序…

postgresql 分组查询第一条数据

SELECT * FROM ( SELECT ROW_NUMBER() OVER (partition BY k.word ORDER BY k."updatedAt" desc) rowId,* from keywords as k ) t WHERE rowId1

关于工作和生活

一、关于工作与生活 我有个有趣的观察&#xff0c;外企公司多的是25-35岁的白领&#xff0c;40岁以上的员工很少&#xff0c;二三十岁的外企员工是意气风发的&#xff0c;但外企公司40岁附近的经理人是很尴尬的。我见过的40岁附近的外企经理人大多在一直跳槽&#xff0c;最后大…

JVM GC 垃圾回收(二)之 判断那些可回收,怎么回收

1、哪些对象可回收&#xff1f; 可行性分析算法 通过一系列GC Roots&#xff08;1&#xff09;作为起始点&#xff0c;其到对象之间的引用&#xff08;2&#xff09;称为引用链&#xff0c;当对象到GC Roots之间不存在引用链相连&#xff0c; 则此对象是不可用的。如下&#xf…

nginx+lua实现上传文件到OSS

目录 技术点 openResty 下载安装 示例 oss.lua 文件 测试代码 text.lua nginx 配置 技术点 openResty OpenResty 是一个基于 Nginx 与 Lua 的高性能 Web 平台&#xff0c;其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并…

使用CEfSharp之旅(7)CEFSharp 拦截 http 请求 websocket 内容

使用CEfSharp之旅&#xff08;7&#xff09;CEFSharp 拦截 http 请求 websocket 内容 原文:使用CEfSharp之旅&#xff08;7&#xff09;CEFSharp 拦截 http 请求 websocket 内容版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。可点击关注博主 &…

sqlserver查询一个表的字段信息

select count(*) from syscolumns where idobject_id(表名) 转载于:https://www.cnblogs.com/dongpo888/archive/2011/05/11/2043370.html

ASP.NET无刷新客户端回调

首先说一下&#xff1a;Page.ClientScript 用于管理脚本、注册脚本和向页添加脚本。 返回结果:一个 System.Web.UI.ClientScriptManager 对象。 ClientScriptManager对象 是一些 在 Web 应用程序中定义用于管理客户端脚本的方法&#xff0c;其中有一个方法重载&#xff1a;stri…

common lisp里的几个操作符

setf 赋值操作符&#xff0c;定义一个全局变量。返回值是最后一个赋值的结果。 let 局部变量操作符。let表达式有两部分组成。第一部分是任意多的变量赋值&#xff0c;他们被包裹在一个()中&#xff0c;第二部分是任意数量的表示式作为 let 的函数体。let 表达式的返回值为 最…

敏捷宣言遵循的十二条原则

敏捷宣言遵循的十二条原则Twelve Principles behind the Agile Manifesto 我们遵循以下原则&#xff1a; We follow these principles: 我们最重要的目标&#xff0c;是通过持续不断地及早交付有价值的软件使客户满意。Our highest priority is to satisfy the customer throug…

微信公众号开发的一些配置

1、开发者ID&#xff08;AppID&#xff09; 开发者ID是公众号开发识别码&#xff0c;配合开发者密码可调用公众号的接口能力。 2、开发者密码&#xff08;AppSecret&#xff09; 开发者密码是校验公众号开发者身份的密码&#xff0c;具有极高的安全性。切记勿把密码直接交给第三…

javascript-对混合字母/数字数组进行排序

[A1, A10, A11, A12, A2, A3, A4, B10, B2, F1, F12, F3]将其排序为&#xff1a; [A1, A2, A3, A4, A10, A11, A12, B2, B10, F1, F3, F12] var reA /[^a-zA-Z]/g; var reN /[^0-9]/g;function sortAlphaNum(a, b) {var aA a.replace(reA, "");var bA b.replace…