一文看懂js中元素的客户区大小（clientWidth,clientHeight）
元素的客户区
元素的客户区大小，指的是元素内容及其内边距所占据的空间大小。
相关属性如下：
1. clientWidth：元素内容区宽度+元素左右内边距
2. clientHeight：元素内容区高度+元素上下内边距
案例代码如下：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
} .parent {
width: 500px;
height: 500px;
margin: 100px auto;
background-color: red;
border: 10px solid #000;
overflow: hidden;
} .child {
width: 300px;
height: 300px;
border: 10px solid #000;
padding: 10px;
margin: 50px 90px;
background-color: green; }
</style>
</head> <body>
<div class="parent">
<div class="child"></div>
</div>
<script>
var child = document.querySelector('.child');
var html = '';
html += 'clientHeight=' + child.clientHeight + "<br>";
html += 'clientWidth=' + child.clientWidth + "<br>";
child.innerHTML = html; </script>
</body> </html>
结果如下：
我们不难发现一个现象元素的offsetwidth=元素的clientWidth+左右边框长度，offsetTop同理。
因为元素的offsetWidth = 元素的宽+左右内边距宽度+左右边框宽度
即使在怪异盒模型下也成立：
代码如下：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
} .parent {
width: 500px;
height: 500px;
margin: 100px auto;
background-color: red;
border: 10px solid #000;
overflow: hidden;
} .child {
width: 300px;
height: 300px;
border: 10px solid #000;
padding: 10px;
margin: 50px 90px;
background-color: green;
/*注意这里*/
box-sizing: border-box; }
</style>
</head> <body>
<div class="parent">
<div class="child"></div>
</div>
<script>
var child = document.querySelector('.child');
var html = '';
html += 'clientHeight=' + child.clientHeight + "<br>";
html += 'clientWidth=' + child.clientWidth + "<br>";
html += "offsetWidth=" + child.offsetWidth + "<br>";
html += "offsetHeight=" + child.offsetHeight + "<br>";
child.innerHTML = html; </script>
</body> </html>
结果如下：
现给出一个确定浏览器窗口大小的函数：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> <body> <script>
function getViewport() {
if (document.compatMode === 'BackCompat') {
return {
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
else {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
}
console.log(getViewport());
</script>
</body> </html>
结果如下：
这里检查document.compatMode属性，判断浏览器是否运行在混杂模式。
在这里我们改写一下该函数：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> <body> <script>
function getViewport() {
if (document.compatMode === 'BackCompat') {
getViewport = function () {
return {
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
}
else {
getViewport = function () {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
}
return getViewport();
}
console.log(getViewport());
</script>
</body> </html>
改造之后我们同样能获取对应的结果，改写之后，我们在调用getViewport的时候，就不会进行判断了。我们知道程序中没有if判断的代码往往比有if判断的代码运行的时候，性能会高一点。
我们在改造一下：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> <body> <script> var getViewport = (function () {
if (document.compatMode === 'BackCompat') {
return function () {
return {
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
}
else {
return function () {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
}
})();
console.log(getViewport());
</script>
</body> </html>
现在这个函数达到了改造一的效果，优化了性能。
其实这两次改造都提升了代码的性能，我们把这种技巧叫做惰性载入函数。
改造一在第一次运行的时候会消耗一下性能，改造二最开始的时候会消耗一下性能，至于采用那种方式进行优化，取决于具体需求。
举个例子：假如这个方法我是一定要使用的，那么可以使用第二种改造，假如这个方法我不一定会使用到，那么可以使用第一种改造。
关于元素客户区大小的知识点差不多就是这样子，如有错误，请告知一下，好及时修改。顺便扯了一下js的高级技巧，我觉得只要能从一个知识点联想到另一个知识点就是好事。
一文看懂js中元素的客户区大小（clientWidth,clientHeight）的更多相关文章
- 一文看懂js中元素的滚动大小（scrollWidth,scrollHeight,scrollTop,scrollLeft）
滚动大小(scroll dimension) 滚动大小指的是包含滚动内容元素的大小. 以下是与元素滚动内容大小相关的属性: 1. scrollWidth:在没有滚动条的情况下,元素内容的总宽度. 2. ...
- 一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）
偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小有其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...
- 一文看懂js中的clientX，clientY，pageX，pageY，screenX，screenY
一. 客户区坐标位置(clientX,clientY) 鼠标事件都是在浏览器视口中的特定位置发生的.这个位置信息保存在事件对象的clientX和clientY属性中,所有浏览器都支持这两个属性. 我们 ...
- 一文搞懂 js 中的各种 for 循环的不同之处
一文搞懂 js 中的各种 for 循环的不同之处 See the Pen for...in vs for...of by xgqfrms (@xgqfrms) on CodePen. for &quo ...
- 一文看懂JS继承
继承是OOP中大家最喜欢谈论的内容之一,一般来说,继承都两种方式:接口继承和实现继承而JavaScript中没有接口继承需要的方法,因此只能依靠实现继承.在讲继承的实现之前,我们首先来回顾一下什么是继 ...
- 一文读懂JS中的原型和原型链（图解）
讲原型的时候,我们应该先要记住以下几个要点,这几个要点是理解原型的关键: 1.所有的引用类型(数组.函数.对象)可以自由扩展属性(除null以外). 2.所有的引用类型都有一个’_ _ proto_ ...
- 一文搞懂js中的typeof用法
基础 typeof 运算符是 javascript 的基础知识点,尽管它存在一定的局限性(见下文),但在前端js的实际编码过程中,仍然是使用比较多的类型判断方式. 因此,掌握该运算符的特点,对于写出好 ...
- 【转帖】一文看懂docker容器技术架构及其中的各个模块
一文看懂docker容器技术架构及其中的各个模块 原创 波波说运维 2019-09-29 00:01:00 https://www.toutiao.com/a6740234030798602763/ ...
- 让你彻底搞懂JS中复杂运算符==
让你彻底搞懂JS中复杂运算符== 大家知道,==是JavaScript中比较复杂的一个运算符.它的运算规则奇怪,容易让人犯错,从而成为JavaScript中“最糟糕的特性”之一. 在仔细阅读了ECMA ...
随机推荐
- 算法笔记 4.4 贪心 问题 A: 看电视
问题 A: 看电视 题目描述 暑假到了,小明终于可以开心的看电视了.但是小明喜欢的节目太多了,他希望尽量多的看到完整的节目. 现在他把他喜欢的电视节目的转播时间表给你,你能帮他合理安排吗? 输入 输入 ...
- JavaScript--DOM，BOM
前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...
- [LC] 437. Path Sum III
You are given a binary tree in which each node contains an integer value. Find the number of paths t ...
- [LC] 124. Binary Tree Maximum Path Sum
Given a non-empty binary tree, find the maximum path sum. For this problem, a path is defined as any ...
- python库之——sklearn
机器学习库sklearn 官方documentation(资料)中分为不同的部分: 其中我们主要讲User Guide(机器学习算法理论介绍).API(程序实现方法): 一.User Guide ht ...
- 密码子演化假说|凝固事件假说|立体化学假说|共进化假说|代谢途径相关性假说|四重兼并|假四重兼并|最小损伤原则|AU-rich|GC-rich|逐步进化假说|分子机制进化假说
生命组学 将密码子表重排后发现,嘌呤嘧啶含量不同,密码子的氨基酸种类由第一二位决定,同时第三位变化大却没有蛋白质层面上实质性的改变,这说明第三位氨基酸是用于维持氨基酸组成不发生变化同时保证蛋白质稳定性 ...
- JAVA异常处理原则和log4j输出详细异常分析
1.多用try,catch;不要一个try,catch包含所有内容 好处:不同模块抓取不同异常,某一模块异常挂了,不影响其他模块的程序的进行 2.多写几个catche:尽量不要使用Exception这 ...
- Inventor 卸载工具，完美彻底卸载清除干净Inventor各种残留注册表和文件
一些同学安装Inventor出错了,也有时候想重新安装Inventor的时候会出现这种本电脑windows系统已安装Inventor,你要是不留意直接安装,只会安装Inventor的附件,Invent ...
- Django的乐观锁与悲观锁实现
1) 事务概念 一组mysql语句,要么执行,要么全不不执行. 2) mysql事务隔离级别 Read Committed(读取提交内容) 如果是Django2.0以下的版本,需要去修改到 ...
- labview学习——生产者/消费者（数据）（事件）
其主要的模型: 主要从以下几个方面理解: 1.可重入性 正常的labview是多线程设计语言,而我们在执行VI时的规则是通过VI的命名来分别调用实现的. 打开VI的Highlight调试工具,可以看出 ...