JS——client
clientTop、clientLeft:
clientTop:盒子的上boder
clientLeft:盒子的左border
clientWidth与clientHeight
1、在有DTD情况下:
document.body.clientWidth、document.body.clientHeight:显示的是body的宽和高,document.documentElement.clientWidth、document.documentElement.clientHeight:显示的是body可视范围的宽和高,
2、在无DTD情况下:
document.body.clientWidth、document.body.clientHeight显示的是body可视范围的宽和高;
document.documentElement.clientWidth、document.documentElement.clientHeight显示的是body的高和body可视范围的宽(IE中显示的都是body可视范围的宽和高)
3、不管有没有DTD:
window.innerWidth、window.innerHeight:显示的都是浏览器可视范围的宽和高,包括浏览器的头部和滚动条部分(IE678无法识别window.innerWidth)
调用者的区别:
1、clientTop、clientLeft、clientWidth、clientHeight调用者是元素
2、clientX、clientY调用者是event对象
client、scroll、offset区别:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth = 内容宽度(不包含border)
scrollHeight = 内容高度(不包含border)
注意事项:IE67,scrollHeight即使不超出盒子,它的值也是内容的高度
兼容写法:
<script>
document.title = client().width + " " + client().height;
//新事件:浏览器大小变化事件(浏览器哪怕大小变化1px也会触动这个事件)
window.onresize = function () {
document.title = client().width + " " + client().height;
} //获取屏幕可视区域的宽高
function client() {
if (window.innerHeight !== undefined) {
return {
"width": window.innerWidth,
"height": window.innerHeight
}
} else if (document.compatMode === "CSS1Compat") {
return {
"width": document.documentElement.clientWidth,
"height": document.documentElement.clientHeight
}
} else {
return {
"width": document.body.clientWidth,
"height": document.body.clientHeight
}
}
}
</script>
注意事项:window.innerWidth、window.innerHeight:显示的都是浏览器可视范围的宽和高,包括浏览器的头部和滚动条部分
JS——client的更多相关文章
- JS client(X,Y)、screen(X,Y)、page(X,Y)的区别
clientX:光标相对于当前窗口的水平位置: clientY :光标相对于当前窗口的垂直位置: screenX :光标相对于该屏幕的水平位置: screenY:光标相对于该屏幕的垂直位置: page ...
- gulp 压缩js,css
最近做的前端项目中发现引用的js包太多,导致页面加载时反应很慢,所以首先想到的是将js和css压缩,提高加载速度. 我们先来看看抓到的当前页面响应时间: 页面异步加载,需要响应时间 7.41秒,这也太 ...
- Why we made vorlon.js and how to use it to debug your JavaScript remotely
Vorlon.js is powered by node.JS, socket.io, and late-night coffee. I would like to share with you wh ...
- 谈谈 React.js 的核心入门知识
近来React.js变得越来越流行,本文就来谈一谈React.js的入门实践,通过分析一些常用的概念,以及提供一些入门 的最佳编程编程方式,仅供参考. 首先需要搞懂的是,React并不是一个框架,Re ...
- 关于JS及应用程序开发的一些体会
代码通常从 一,生命周期 二,业务流程 这几方面来看. JS Client可以和Server端分离. JS端的生命周期. Server端就是 JS能处理的只是HTTP协议.
- 采用highchart js+flot+rrd生成cpu、mem状态监控图
HTML <script type="text/javascript" src="../static/js/jquery-1.8.0.min.js"> ...
- ASP.NET Core 与 Vue.js 服务端渲染
http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oop ...
- [OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
在上一篇基于OIDC的SSO的中涉及到了4个Web站点: oidc-server.dev:利用oidc实现的统一认证和授权中心,SSO站点. oidc-client-hybrid.dev:oidc的一 ...
- 如何用 Node.js 和 Elasticsearch 构建搜索引擎
Elasticsearch 是一款开源的搜索引擎,由于其高性能和分布式系统架构而备受关注.本文将讨论其关键特性,并手把手教你如何用它创建 Node.js 搜索引擎. Elasticsearch 概述 ...
随机推荐
- Spring @Conditional注解 详细讲解及示例
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/xcy1193068639/article/details/81491071 前言: @Conditi ...
- 又见GCD
Problem Description 有三个正整数a,b,c(0<a,b,c<10^6),其中c不等于b.若a和c的最大公约数为b,现已知a和b,求满足条件的最小的c. Input ...
- 洛谷—— P2176 [USACO14FEB]路障Roadblock
https://www.luogu.org/problem/show?pid=2176 题目描述 每天早晨,FJ从家中穿过农场走到牛棚.农场由 N 块农田组成,农田通过 M 条双向道路连接,每条路有一 ...
- Java的动态代理(DynamicProxy)
代理的概述 代理是一种常用的设计模式,其目的就是为其他对象提供一个代理以控制对某个对象的访问.代理类负责为委托类预处理消息,过滤消息并转发消息,以及进行消息被委托类执行后的后续处理. 代理模式UML图 ...
- ASPNET Razor 使用 @Ajax.BeginForm 需要注意到的细节
创建空的web项目,通过Nuget引用mvc组件来搭建空的MVC项目时, 在视图页面中无法使用@Ajax.BegForm来进行异步提交数据, 而新建默认的MVC模板项目却能够正常使用@Ajax.Beg ...
- Spring MVC JSON自己定义类型转换(续)
前面提到了两种转换类型的方法(Spring MVC JSON自己定义类型转换),这里针对Json转换提供一种更简便的方法. 通过配置全局的日期转换来避免使用麻烦的注解. 首先用到了一个简单的日期工具类 ...
- JMeter—丰富报表功能PerfMon插件
可能有童鞋不知道PerfMon插件是干啥的.这里简要说一下: 在做负载測试时,我们要时刻关注server的CPU.MEM--的使用情况,可是JMeter本身对这些信息是不做收集的,这个时候PerfMo ...
- Android学习之仿QQ側滑功能的实现
如今项目越来越多的应用了滑动删除的功能,Android本来遵循的是长按删除,IOS定制的是滑动删除,不可否认滑动删除确实在客户体验上要好一点,所以看了非常多关于仿QQ滑动删除的样例,还是感觉代码家的A ...
- javascript的call和apply
coffeescript里,每个文件编译成JS后,都是(function(){...}).call(this);的架势 这个call,该怎么理解呢? 在javascript里面,call 或者 app ...
- 分享tiny4412,emmc烧录u-boot, 支持fastboot模式烧写emmc【转】
本文转载自:http://www.arm9home.net/read.php?tid-80810.html 分享tiny4412,emmc烧录u-boot, 支持fastboot模式烧写emmc ...