38-client（可视区）相关属性

client 家族的组成

clientWidth 和 clientHeight

元素调用时：

  • clientWidth：获取元素的可见宽度（width + padding）。

  • clientHeight：获取元素的可见高度（height + padding）。

body/html 调用时：

  • clientWidth：获取网页可视区域宽度。

  • clientHeight：获取网页可视区域高度。

声明：

  • clientWidth 和 clientHeight 属性是只读的，不可修改。

  • clientWidth 和 clientHeight 的值都是不带 px 的，返回的都是一个数字，可以直接进行计算。

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
  • 作用：鼠标距离浏览器可视区域的距离（左、上）。

函数封装：获取浏览器的宽高（可视区域）

函数封装如下：

  1. //函数封装：获取屏幕可视区域的宽高
  2. function client() {
  3.     if (window.innerHeight !== undefined) {
  4.         //ie9及其以上的版本的写法
  5.         return {
  6.             "width": window.innerWidth,
  7.             "height": window.innerHeight
  8.         }
  9.     } else if (document.compatMode === "CSS1Compat") {
  10.         //标准模式的写法（有DTD时）
  11.         return {
  12.             "width": document.documentElement.clientWidth,
  13.             "height": document.documentElement.clientHeight
  14.         }
  15.     } else {
  16.         //没有DTD时的写法
  17.         return {
  18.             "width": document.body.clientWidth,
  19.             "height": document.body.clientHeight
  20.         }
  21.     }
  22. }

案例：根据浏览器的可视宽度，给定不同的背景的色。

PS：这个可以用来做响应式。

代码如下：（需要用到上面的封装好的方法）

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  9. <script src="tools.js"></script>
  10. <script>
  11.     //需求：浏览器每次更改大小，判断是否符合某一标准然后给背景上色。
  12.     //  // >960红色，大于640小于960蓝色，小于640绿色。
  14.     window.onresize = fn;  //页面大小发生变化时，执行该函数。
  15.     //页面加载的时候直接执行一次函数，确定浏览器可视区域的宽，给背景上色
  16.     fn();
  18.     //封装成函数，然后指定的时候去调用和绑定函数名
  19.     function fn() {
  20.         if (client().width > 960) {
  21.             document.body.style.backgroundColor = "red";
  22.         } else if (client().width > 640) {
  23.             document.body.style.backgroundColor = "blue";
  24.         } else {
  25.             document.body.style.backgroundColor = "green";
  26.         }
  27.     }
  28. </script>
  29. </body>
  30. </html>

上当代码中，window.onresize事件指的是：在窗口或框架被调整大小时发生。各个事件的解释如下：

  • window.onscroll 屏幕滑动

  • window.onresize 浏览器大小变化

  • window.onload 页面加载完毕

  • div.onmousemove 鼠标在盒子上移动（注意：不是盒子移动）

获取显示器的分辨率

比如，我的电脑的显示器分辨率是：1920*1080。

获取显示器的分辨率：

  1.     window.onresize = function () {
  2.         document.title = window.screen.width + "    " + window.screen.height;
  3.     }

显示效果：

49-client（可视区）相关属性 - 图1

上图中，不管我如何改变浏览器的窗口大小，title栏显示的值永远都是我的显示器分辨率：1920*1080。

我的公众号

想学习更多技能？不妨关注我的微信公众号：千古壹号（id：qianguyihao）。

扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：

49-client（可视区）相关属性 - 图2