Web/04-前端基本功:JavaScript特效/03-client家族(可视区).md
qianguyihao 207f7b7465 modify
2018-03-17 12:10:41 +08:00

179 lines
4.0 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

## 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.scrollTopwindow调用(盒子也可以调用,但必须有滚动条)
- 作用:浏览器无法显示的部分(被卷去的部分)。
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;
}
```
显示效果:
20180203_2155.png
上图中不管我如何改变浏览器的窗口大小title栏显示的值永远都是我的显示器分辨率1920*1080。