在前面总结了offset家族属性和scroll家族属性，今天来总结一下client家族属性，同前面一样，client家族也包宽高和左上，具体的通过代码来区别这三大家族属性的不同。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        #box{

            width: 240px;

            height: 240px;

            background-color: red;

            padding: 40px;

            border: 20px solid #000;

        }

        p{

            margin-bottom: 20px;

        }

    </style>

</head>

<body>

   <div id="box">

        <p>前端js</p>

        <p>前端js</p>

        <p>前端js</p>

        <p>前端js</p>

        <p>前端js</p>

        <p>前端js</p>

        <p>前端js</p>

        <p>前端js</p>

        <p>前端js</p>

        <p>前端js</p>

        <p>前端js</p>

        <p>前端js</p>

        <p>前端js</p>

        <p>前端js</p>

        <p>前端js</p>

        <p>前端js</p>

        <p>前端js</p>

        <p>前端js</p>

   </div>

<script>

    var box = document.getElementById("box");

    console.log(box.offsetWidth, box.offsetHeight);

    console.log(box.clientWidth, box.clientHeight);

    console.log(box.scrollWidth, box.scrollHeight);

    console.log(box.offsetLeft, box.offsetTop);

    console.log(box.clientLeft, box.clientTop);

    console.log(box.scrollLeft, box.scrollTop);

</script>

</body>

</html>

在上面的例子中，我们定义了一个内容超出，出现滚动的div，并了区分，添加了较大的边框和边距，下面是不同家族的打印结果：

从上面的打印结果中，我们可以得出结论：

  • offsetWidth 和 offsetHeight：border + padding + 内容的宽度和高度
  • clientWidth 和 clientHeight：padding + 内容的宽度和高度
  • scrollWidth 和 scrollHeight：能够滚动的内容的宽度和高度
  • offsetLeft 和 offsetTop：距离有定位的父元素的左边和上边的距离
  • clientLeft 和 clientTop：左边和上边边框的宽度
  • scrollLeft 和 scrollTop：左边和上边的滚动的长度

我们还可以通过下面的图更清晰的看出三者之间的差别：

封装

在前面总结scroll家族的时候基于标准模式和怪异模式，封装过一次scroll家族属性，同理，为了解决不同浏览器之间的差距，我们也可以封装一个client家族属性的函数，y用于获取屏幕的可是宽度和高度。

function client() {

    if(window.innerWidth){ // ie9+ 最新的浏览器

        return {

            width: window.innerWidth,

            height: window.innerHeight

        }

    }else if(document.compatMode === "CSS1Compat"){ // W3C

        return {

            width: document.documentElement.clientWidth,

            height: document.documentElement.clientHeight

        }

    }

    return {

        width: document.body.clientWidth,

        height: document.body.clientHeight

    }

}

client家族属性的更多相关文章

  1. offse家族属性

    在JavaScript中,常用offset.scroll和client家族属性来表示元素的位置和大小相关属性,最近在网上找到了一张图来表示三者之间的关系,正好可以在此借鉴一下. 本次主要来看一下off ...

  2. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

  3. scroll家族属性

    上一篇主要分析了一下offset家族属性,本篇文章则主要是来分析一下scroll家族属性. 首先,scroll家族包括4个属性: 网页正文宽度:document.body.scrollWidth; 网 ...

  4. 第52天：offset家族、scroll家族和client家族的区别

    一.offset家族 1.offsetWidth offsetHeight offsetLeft offsetTop offsetParent共同组成了offset家族,用来获取元素尺寸. offse ...

  5. 三大家族(offset、scroll、client)

    offset.scroll.client三大家族 offset家族 offsetWidth 与 offsetHeight offset 偏移 用于获取元素自身的位置和大小 offsetWidth和of ...

  6. client三大家族区别（三大家族总结）

    目录 目录 2 今日内容: 4 第1章 第三大家族client 4 1.1 主要成员 4 1.2 三大家族区别(三大家族总结) 5 1.2.1 Width和height 5 1.2.2 top和lef ...

  7. JavaScript offset、client、scroll家族

    offsetParent <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  8. 系列属性(offset、scroll、client)

    一.offset系列属性 <div id="dv"></div> <!-- 已在style标签里设置div宽高各100px --> <sc ...

  9. 原生js里的offset、client、scroll三大家族

    offset家族 自己的,用于获取元素自身尺寸 offsetWidth 和 offsetHeight 获取元素自身的宽度和高度,包括内容+边框+内边距 offsetLeft 和 offsetTop 距 ...

随机推荐

  1. day 0150面向对象-成员

    一 类的成员 在类中定义的变量和方法都被称为成员 class Person: def __init__(self, name, num, gender, birthday): # 成员变量(实例变量) ...

  2. 51Nod 1070：Bash游戏 V4（斐波那契博弈）

    1070 Bash游戏 V4  基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题  收藏  关注 有一堆石子共有N个.A B两个人轮流拿,A先拿.每次拿的数量最少1个 ...

  3. 【liunx】时间处理函数

    一.脚本示例 [mylinuxaccount@linux01 ~]$ date +%Y%m%d 20171224 [mylinuxaccount@linux01 ~]$ date +%F 2017-1 ...

  4. 使用kube_ping进行Keycloak群集设置 - DZone Cloud

    转自:https://www.jdon.com/51501 看看如何使用kube_ping和Keycloak实现自动发现? Keycloak是一个开源软件,提供身份管理和访问管理的单点登录.Keyco ...

  5. Linux系统运维故障排查

    一.思路 1.处理问题要求 2.一般思路 二.具体问题 1.网络问题 (1)网络不通 (2)网络很慢 2.硬件问题 3.操作系统问题 (1)系统无法正常启动 (2)系统运行慢或死机 4.服务或程序问题 ...

  6. Avoiding post increase or decrease

    When we write a loop, most of us will use post increase or decrease, but there is a better solution. ...

  7. zabbix--3.0--2

    zabbix页面注意事项  1. 工作中使用zabbix常遇到的问题:生产一台机器告警了顺手关闭了,然后忘记打开了 2.监控项这里,也尽量不禁用,而是删除.能删除就删除 3.使用触发器的过程中,有时候 ...

  8. str的用法

    ##   字符串的索引切片以及常用的操作方法都是形成新的字符串,和原字符串没有关系 #  切片和索引 # 按照索引取值 #按照切片取值 ,顾头不顾尾, #切片加步长  # 只要倒叙取值就要加上反向步长 ...

  9. 用windbg 检查内存泄漏

    1.下载编译https://github.com/0cch/luadbg 2.编写脚本1.txt .load luadbg_v15*.sympath+ srv*c:\MyServerSymbols*h ...

  10. e生保plus

    e生保plus https://m.health.pingan.com/share/products/esb_plus.html?re_from=qdlmMSDbxtj&order_from= ...