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. CF558E A simple task 线段树

    这道题好猥琐啊啊啊啊啊啊 写了一个上午啊啊啊啊 没有在update里写pushup啊啊啊啊 题目大意: 给你一个字符串s,有q个操作 l r 1 :把sl..rsl..r按升序排序 l r 0 :把s ...

  2. [USACO1.2]挤牛奶Milking Cows

    题目描述 三个农民每天清晨5点起床,然后去牛棚给3头牛挤奶.第一个农民在300秒(从5点开始计时)给他的牛挤奶,一直到1000秒.第二个农民在700秒开始,在 1200秒结束.第三个农民在1500秒开 ...

  3. ssh整合配置文件------web.xml配置

    <?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://w ...

  4. Tomcat启动时SecureRandom超级慢的问题

    https://my.oschina.net/wangnian/blog/687914

  5. JAVA内存模型与线程以及volatile理解

    Java内存模型是围绕在并发过程中如何处理原子性.可见性.有序性来建立的. 一.主内存与工作内存 Java内存模型主要目标是在虚拟机中将变量存储到内存和从内存中取出变量.这里的变量包括:实例字段.静态 ...

  6. 高数(A)下 第十章

    10.1 10.2 10.3 10.4 10.5 10.7 自测题

  7. J2SE基础:5.面向对象的特性2

    Final的使用 final在类之前 表示该类是终于类.表示该类不能再被继承. final在方法之前 表示该方法是终于方法,该方法不能被不论什么派生的子类覆盖. final在变量之前 表示变量的值在初 ...

  8. Open Flash Chart2 常用的参数

    http://fyzeng.diandian.com/post/2011-07-29/3339982 {   /* 图表标题 */   "title" : {     " ...

  9. Cocos2d-x 3.x 图形学渲染系列十一

    笔者介绍:姜雪伟.IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,国家专利发明人;已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D ...

  10. C++ Sleep Function 使用方法 Sleep(-1)

    <span style="font-size:18px;">//==================================================== ...