JS client系列简明教程
2018-10-04 本文已影响76人
阿敏其人
本文自出“阿敏其人”技术博客，转载请取得本人同意。
文：阿敏其人
一、client团队成员
client，最直接的，是客户端的意思。
Js中有一些系列的方法client的方法和属性。
打开W3c，看一下Dom Element对象关于scroll的属性。
关于client，大概有如下一些属性：
| 属性 | 解释 |
|---|---|
| element.clientHeight | 在页面上返回内容的可视高度 height + padding |
| element.clientWidth | 返回元素的可见宽度。在页面上返回内容的可视宽度 width + padding |
offsetHeight、clientHeight、scrollHeight 之间的小对比
- offsetHeight：height + padding + border
- clientHeight： height + padding
- scrollHeight：大小是内容的大小 （可能超过offsetHeight）
image.png
二、clientHeight 和 clientWidth
计算方式
- clientHeight = height + padding；
- clientWidth = width + padding；
例子
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box0{
width: 100px;
height: 200px;
padding: 10px;
border: 20px solid red;
margin: 30px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="box0"></div>
</body>
<script>
var box0 = document.getElementById("box0");
console.log("box0.clientHeight： "+box0.clientHeight); // box0.clientHeight： 220
console.log("box0.clientWidth： "+box0.clientWidth); // box0.clientWidth： 120
</script>
</html>
.
.
通过结果可证。
clientHeight = height + padding；
clientWidth = width + padding；
同系列相关文章：
JS scroll系列简明教程
JS offset系列简明教程
本文完。
