181 lines
4.0 KiB
Markdown
181 lines
4.0 KiB
Markdown
|
||
|
||
|
||
## client 家族的组成
|
||
|
||
### clientWidth 和 clientHeight
|
||
|
||
盒子调用时：
|
||
|
||
- clientWidth：获取盒子区域宽度（padding + width）。
|
||
|
||
- clientHeight：获取盒子区域高度（padding + height）。
|
||
|
||
body/html调用时：
|
||
|
||
- clientWidth：获取网页可视区域宽度。
|
||
|
||
- clientHeight：获取网页可视区域高度。
|
||
|
||
|
||
### clientX 和 clientY
|
||
|
||
event调用：
|
||
|
||
- clientX：鼠标距离可视区域左侧距离。
|
||
|
||
- clientY：鼠标距离可视区域上侧距离。
|
||
|
||
|
||
|
||
### clientTop 和 clientLeft
|
||
|
||
- clientTop：盒子的上border。
|
||
|
||
- clientLeft：盒子的左border。
|
||
|
||
|
||
## 三大家族 offset/scroll/client 的区别
|
||
|
||
### 区别1：宽高
|
||
|
||
- offsetWidth = width + padding + border
|
||
- offsetHeight = height + padding + border
|
||
|
||
- scrollWidth = 内容宽度（不包含border）
|
||
- scrollHeight = 内容高度（不包含border）
|
||
|
||
- clientWidth = width + padding
|
||
- clientHeight = height + padding
|
||
|
||
|
||
### 区别2：上左
|
||
|
||
|
||
offsetTop/offsetLeft：
|
||
|
||
- 调用者：任意元素。(盒子为主)
|
||
- 作用：距离父系盒子中带有定位的距离。
|
||
|
||
|
||
scrollTop/scrollLeft：
|
||
|
||
- 调用者：document.body.scrollTop（window调用）(盒子也可以调用，但必须有滚动条)
|
||
- 作用：浏览器无法显示的部分（被卷去的部分）。
|
||
|
||
|
||
clientY/clientX：
|
||
|
||
- 调用者：event
|
||
- 作用：鼠标距离浏览器可视区域的距离（左、上）。
|
||
|
||
|
||
|
||
|
||
## 函数封装：获取浏览器的宽高（可视区域）
|
||
|
||
函数封装如下：
|
||
|
||
```javascript
|
||
//函数封装：获取屏幕可视区域的宽高
|
||
function client() {
|
||
if (window.innerHeight !== undefined) {
|
||
//ie9及其以上的版本的写法
|
||
return {
|
||
"width": window.innerWidth,
|
||
"height": window.innerHeight
|
||
}
|
||
} else if (document.compatMode === "CSS1Compat") {
|
||
//标准模式的写法（有DTD时）
|
||
return {
|
||
"width": document.documentElement.clientWidth,
|
||
"height": document.documentElement.clientHeight
|
||
}
|
||
} else {
|
||
//没有DTD时的写法
|
||
return {
|
||
"width": document.body.clientWidth,
|
||
"height": document.body.clientHeight
|
||
}
|
||
}
|
||
}
|
||
|
||
```
|
||
|
||
|
||
**案例：根据浏览器的可视宽度，给定不同的背景的色。**
|
||
|
||
> PS：这个可以用来做响应式。
|
||
|
||
代码如下：（需要用到上面的封装好的方法）
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head lang="en">
|
||
<meta charset="UTF-8">
|
||
<title></title>
|
||
</head>
|
||
<body>
|
||
|
||
<script src="tools.js"></script>
|
||
<script>
|
||
//需求：浏览器每次更改大小，判断是否符合某一标准然后给背景上色。
|
||
// // >960红色，大于640小于960蓝色，小于640绿色。
|
||
|
||
window.onresize = fn; //页面大小发生变化时，执行该函数。
|
||
//页面加载的时候直接执行一次函数，确定浏览器可视区域的宽，给背景上色
|
||
fn();
|
||
|
||
//封装成函数，然后指定的时候去调用和绑定函数名
|
||
function fn() {
|
||
if (client().width > 960) {
|
||
document.body.style.backgroundColor = "red";
|
||
} else if (client().width > 640) {
|
||
document.body.style.backgroundColor = "blue";
|
||
} else {
|
||
document.body.style.backgroundColor = "green";
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
|
||
上当代码中，`window.onresize`事件指的是：在窗口或框架被调整大小时发生。各个事件的解释如下：
|
||
|
||
- window.onscroll 屏幕滑动
|
||
|
||
- window.onresize 浏览器大小变化
|
||
|
||
- window.onload 页面加载完毕
|
||
|
||
- div.onmousemove 鼠标在盒子上移动（注意：不是盒子移动）
|
||
|
||
|
||
|
||
## 获取显示器的分辨率
|
||
|
||
比如，我的电脑的显示器分辨率是：1920*1080。
|
||
|
||
|
||
获取显示器的分辨率：
|
||
|
||
```javascript
|
||
window.onresize = function () {
|
||
document.title = window.screen.width + " " + window.screen.height;
|
||
}
|
||
```
|
||
|
||
显示效果：
|
||
|
||
|
||
|
||
|
||
|
||
上图中，不管我如何改变浏览器的窗口大小，title栏显示的值永远都是我的显示器分辨率：1920*1080。
|
||
|
||
|
||
|