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、clientLeftclientWidth、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的更多相关文章

  1. JS client(X,Y)、screen(X,Y)、page(X,Y)的区别

    clientX:光标相对于当前窗口的水平位置: clientY :光标相对于当前窗口的垂直位置: screenX :光标相对于该屏幕的水平位置: screenY:光标相对于该屏幕的垂直位置: page ...

  2. gulp 压缩js,css

    最近做的前端项目中发现引用的js包太多,导致页面加载时反应很慢,所以首先想到的是将js和css压缩,提高加载速度. 我们先来看看抓到的当前页面响应时间: 页面异步加载,需要响应时间 7.41秒,这也太 ...

  3. 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 ...

  4. 谈谈 React.js 的核心入门知识

    近来React.js变得越来越流行,本文就来谈一谈React.js的入门实践,通过分析一些常用的概念,以及提供一些入门 的最佳编程编程方式,仅供参考. 首先需要搞懂的是,React并不是一个框架,Re ...

  5. 关于JS及应用程序开发的一些体会

    代码通常从 一,生命周期 二,业务流程 这几方面来看. JS Client可以和Server端分离. JS端的生命周期. Server端就是 JS能处理的只是HTTP协议.

  6. 采用highchart js+flot+rrd生成cpu、mem状态监控图

    HTML <script type="text/javascript" src="../static/js/jquery-1.8.0.min.js"> ...

  7. ASP.NET Core 与 Vue.js 服务端渲染

    http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oop ...

  8. [OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)

    在上一篇基于OIDC的SSO的中涉及到了4个Web站点: oidc-server.dev:利用oidc实现的统一认证和授权中心,SSO站点. oidc-client-hybrid.dev:oidc的一 ...

  9. 如何用 Node.js 和 Elasticsearch 构建搜索引擎

    Elasticsearch 是一款开源的搜索引擎,由于其高性能和分布式系统架构而备受关注.本文将讨论其关键特性,并手把手教你如何用它创建 Node.js 搜索引擎. Elasticsearch 概述 ...

随机推荐

  1. Spring @Conditional注解 详细讲解及示例

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/xcy1193068639/article/details/81491071 前言: @Conditi ...

  2. 又见GCD

    Problem Description 有三个正整数a,b,c(0<a,b,c<10^6),其中c不等于b.若a和c的最大公约数为b,现已知a和b,求满足条件的最小的c.   Input ...

  3. 洛谷—— P2176 [USACO14FEB]路障Roadblock

    https://www.luogu.org/problem/show?pid=2176 题目描述 每天早晨,FJ从家中穿过农场走到牛棚.农场由 N 块农田组成,农田通过 M 条双向道路连接,每条路有一 ...

  4. Java的动态代理(DynamicProxy)

    代理的概述 代理是一种常用的设计模式,其目的就是为其他对象提供一个代理以控制对某个对象的访问.代理类负责为委托类预处理消息,过滤消息并转发消息,以及进行消息被委托类执行后的后续处理. 代理模式UML图 ...

  5. ASPNET Razor 使用 @Ajax.BeginForm 需要注意到的细节

    创建空的web项目,通过Nuget引用mvc组件来搭建空的MVC项目时, 在视图页面中无法使用@Ajax.BegForm来进行异步提交数据, 而新建默认的MVC模板项目却能够正常使用@Ajax.Beg ...

  6. Spring MVC JSON自己定义类型转换(续)

    前面提到了两种转换类型的方法(Spring MVC JSON自己定义类型转换),这里针对Json转换提供一种更简便的方法. 通过配置全局的日期转换来避免使用麻烦的注解. 首先用到了一个简单的日期工具类 ...

  7. JMeter—丰富报表功能PerfMon插件

    可能有童鞋不知道PerfMon插件是干啥的.这里简要说一下: 在做负载測试时,我们要时刻关注server的CPU.MEM--的使用情况,可是JMeter本身对这些信息是不做收集的,这个时候PerfMo ...

  8. Android学习之仿QQ側滑功能的实现

    如今项目越来越多的应用了滑动删除的功能,Android本来遵循的是长按删除,IOS定制的是滑动删除,不可否认滑动删除确实在客户体验上要好一点,所以看了非常多关于仿QQ滑动删除的样例,还是感觉代码家的A ...

  9. javascript的call和apply

    coffeescript里,每个文件编译成JS后,都是(function(){...}).call(this);的架势 这个call,该怎么理解呢? 在javascript里面,call 或者 app ...

  10. 分享tiny4412,emmc烧录u-boot, 支持fastboot模式烧写emmc【转】

    本文转载自:http://www.arm9home.net/read.php?tid-80810.html 分享tiny4412,emmc烧录u-boot, 支持fastboot模式烧写emmc   ...