JS获取屏幕浏览器网页高度和宽度属性

 1 网页可见区域宽:document.body.clientWidth 
 2 网页可见区域高:document.body.clientHeight 
 3 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 
 4 网页可见区域高:document.body.offsetHeight (包括边线的宽) 
 5 网页正文全文宽:document.body.scrollWidth 
 6 网页正文全文高:document.body.scrollHeight 
 7 网页被卷去的高:document.body.scrollTop 
 8 网页被卷去的左:document.body.scrollLeft 
 9 网页正文部分上:window.screenTop 
10 网页正文部分左:window.screenLeft 
11 屏幕分辨率的高:window.screen.height 
12 屏幕分辨率的宽:window.screen.width 
13 屏幕可用工作区高度:window.screen.availHeight 
14 屏幕可用工作区宽度:window.screen.availWidth
15 
16 
17 HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 
18 scrollHeight: 获取对象的滚动高度。 
19 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
20 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
21 scrollWidth:获取对象的滚动宽度 
22 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
23 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
24 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
25 event.clientX 相对文档的水平座标 
26 event.clientY 相对文档的垂直座标 
27 event.offsetX 相对容器的水平坐标 
28 event.offsetY 相对容器的垂直坐标 
29 document.documentElement.scrollTop 垂直方向滚动的值 
30 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
31 
32 IE,FireFox 差异如下:
33 
34 IE6.0、FF1.06+:
35 
36 clientWidth = width + padding
37 
38 clientHeight = height + padding
39 
40 offsetWidth = width + padding + border
41 
42 offsetHeight = height + padding + border
43 
44 IE5.0/5.5: 
45 clientWidth = width - border
46 
47 clientHeight = height - border
48 
49 offsetWidth = width
50 
51 offsetHeight = height
52 
53 (需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

 

转载于:https://www.cnblogs.com/sirius-cg/archive/2012/05/18/2507599.html

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

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

相关文章

微信扫码进入小程序

这几天开发完小程序之后,需要实现微信扫码进入小程序,坎坎坷坷的过程终于实现了,现在做一总结: 1、配置二维码规则: 2、页面插入代码即可: onLoad: function(options) {console.log("index 生命周期 o…

使用用户名/密码和Servlet安全性保护WebSockets

RFC 6455提供了WebSockets安全注意事项的完整列表。 其中一些是在协议本身中烘焙的,其他一些则需要更多有关如何在特定服务器上实现它们的解释。 让我们谈谈协议本身内置的一些安全性: HTTP请求中的Origin头仅包含标识发起该请求的主体(网页…

文件的读取

这几天在研究文件读取问题&#xff0c;写了个小demo&#xff0c;如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Document</title> </head> <body><input type…

关于stm32启动文件的选择

关于stm32启动文件的选择 1推荐- startup_stm32f10x_ld_vl.s: for STM32 Low density Value line devices - startup_stm32f10x_ld.s: for STM32 Low density devices - startup_stm32f10x_md_vl.s: for STM32 Medium density Value line devices - startup_stm32f10x_md.s: fo…

如何使用GZip和Jersey压缩Java REST API中的响应

在某些情况下&#xff0c;您的REST api会提供非常长的响应&#xff0c;我们都知道移动设备/网络上的传输速度和带宽仍然非常重要。 我认为这是开发支持移动应用程序的REST api时需要解决的第一个性能优化点。 你猜怎么了&#xff1f; 因为响应是文本&#xff0c;所以我们可以压…

C函数篇(recv函数)

简述 从一个套接口接收数据。表头文件&#xff1a;#include<sys/types.h>#include<sys/socket.h>int PASCAL FAR recv( SOCKET s, char FAR* buf, int len, int flags);s&#xff1a;一个标识已连接套接口的描述字。buf&#xff1a;用于接收数据的缓冲区。len&…

js文字排序的方法

拼音排序&#xff1a; var arr [{ a: 1, b: "我" }, { a: 1, b: "是" }, { a: 1, b: "帅" }, { a: 1, b: "哥" }, { a: 1, b: "你" }, { a: 1, b: "服" }, { a: 1, b: "不" }];arr.sort(function comp…

线程池之外:Java并发并不像您想象的那么糟糕

Apache Hadoop&#xff0c;Apache Spark&#xff0c;Akka&#xff0c;Java 8流和Quasar&#xff1a; 针对Java开发人员的经典用例以及最新的并发方法 关于并发性更新概念的讨论很多&#xff0c;但是许多开发人员还没有机会将他们的想法缠住。 在本文中&#xff0c;我们将详细介…

编写高质量的代码,改善c#程序的157个建议_之1~10

//编写高质量的代码&#xff0c;改善c#程序的157个建议# 1、正确操作字符串## 1* 确保尽量少的装箱* 避免分配额外的内存空间1. 会进行一次装箱C#string str1"str1"9;2. 没有装箱&#xff0c;调用的是整型的ToString方法C#string str2"str2"9.ToString();#…

vue中使用Ueditor编辑器 -- 1

一、 下载包&#xff1a; 从Ueditor的官网下载1.4.3.3jsp版本的Ueditor编辑器&#xff0c;官网地址为&#xff1a;http://ueditor.baidu.com/website/download.html 下载解压后会得到如果下文件目录&#xff1a; 将上述Ueditor文件夹拷贝到vue项目的static文件夹中&#xff0…

编译原理--递归下降分析实验C++

一、实验项目要求 1.实验目的 根据某一文法编制调试递归下降分析程序&#xff0c;以便对任意输入的符号串进行分析。本次实验的目的主要是加深对递归下降分析法的理解。 2.实验要求 对下列文法&#xff0c;用递归下降分析法对任意输入的符号串进行分析&#xff1a; &#…

浅析路径遍历漏洞 文/饭

许多的Web应用程序一般会有对服务器的文件读取查看的功能&#xff0c;大多会用到提交的参数来指明文件名&#xff0c;形如&#xff1a;http://www.nuanyue.com/getfileimage.jgp 当服务器处理传送过来的image.jpg文件名后&#xff0c;Web应用程序即会自动添加完整路径&#xff…

摆脱困境:在DbUnit数据集中使用空值

如果我们正在为使用Spring Framework的应用程序编写集成测试&#xff0c;则可以通过使用Spring Test DbUnit将DbUnit与Spring测试框架集成。 但是&#xff0c; 这种集成并非没有问题 。 通常&#xff0c;我们必须在运行测试之前向数据库中插入空值&#xff0c;或者验证保存到…

artdialog5 bug

1.使用artdialog5时&#xff0c;使用两个输入框传值&#xff0c;一直无法取到值&#xff0c;使用简单的ID无法取到值&#xff0c;如idbranch..改为idbranch_str_dialog就可以了&#xff0c;问题是解决了&#xff0c;可是没有找到原因所在&#xff01; 转载于:https://www.cnblo…

vue中通过js控制页面样式方法

在使用vue.js框架的时候&#xff0c;有时候会希望在页面渲染完成之后&#xff0c;再执行函数方法来处理初始化相关的操作&#xff0c;如果只处理页面位置、宽或者高时&#xff0c;必须要在页面完全渲染之后才可以&#xff0c;页面没有加载完成之前&#xff0c;获取到的宽高不准…

Memcached入门指南

1 概览 Memcached是一个免费开源&#xff0c;高性能的&#xff0c;分布式内存对象缓存系统&#xff0c;为了加快动态web应用程序&#xff0c;减轻数据库负载。 Memcached是一个内存中的基于键/值存储任意数据小片段&#xff08;字符&#xff0c;对象&#xff09;&#xff0c;存…

css正則匹配、模糊匹配

//所有class包含font-red的p标签 p[class~"font-red"] {color: red;} [abc^"def"] 选择 abc 属性值以 "def" 开头的所有元素 [abc$"def"] 选择 abc 属性值以 "def" 结尾的所有元素 [abc*"def"] 选择 abc 属性值中…

快速指南:剖析JBoss BPM跨进程通信

&#xff08;文章来宾与北美红帽公司高级解决方案架构师杰伊保拉杰共同撰写&#xff09; 几周的提示与技巧文章将深入探讨JBoss BPM Suite&#xff0c;特别是有关如何在两个流程之间进行通信的问题。 在进入解决方案详细信息之前&#xff0c;让我们首先约束将要讨论的用例。 …

字符串中全角半角之间的转换

前几天&#xff0c;在做表单验证的时候&#xff0c;发现用户在输入表单内容的时候&#xff0c;正常情况下都是半角输入&#xff0c;但是也有可能是全角输入&#xff0c;所以就牵扯到全角输入内容的验证&#xff0c;这里便提供全角和半角之间的转换函数&#xff0c;与大家分享一…

Android HAL 层,三个重要的结构体的源码~

最近在学习android HAL 层 ~ 离不开这三个数据结构~~先贴出来 typedef struct hw_module_t { /** tag must be initialized to HARDWARE_MODULE_TAG */ uint32_t tag; /** major version number for the module */ uint16_t version_major; /** minor version number …