scrollWidth：对象的实际内容宽度，不包括边线宽度，会随对象中内容超过可视区而变大。

clientWidth：对象内容的可视区的宽度，不包括边线宽度，会随对象显示大小的变化而变化。

offsetWidth：对象整体的实际宽度，包括边线宽度，会随对象显示大小的变化而变化。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .outer {

            width: 100px;

            height: 100px;

            border: 50px solid red;

        }

        .inner{

            width: 400px;

            height: 50px;

            background: #000000;

        }

    </style>

</head>

<body>

<div class="outer" id="outer">

    <div class="inner"></div>

</div>

<script>

    var ele = document.getElementById('outer');

    console.log('offsetWidth: ' + ele.offsetWidth);

    console.log('scrollWidth: ' + ele.scrollWidth);

    console.log('clientWidth: ' + ele.clientWidth);

</script>

</body>

</html>

scrollWidth、clientWidth 和 offsetWidth的更多相关文章

  1. scrollWidth,clientWidth与offsetWidth的区别

    scrollWidth  是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度). clientWidth  是对象可见的宽度,不包滚动条等边线,会随窗口的显 ...

  2. 【clientX，offsetX，screenX】 【scrollWidth，clientWidth，offsetWidth】的区别

    一.深刻认识clientX,offsetX,screenX 概念(来源于网络): clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clie ...

  3. 页面元素坐标和偏移（clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等）相关整理

    鼠标事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的坐标位置,有相对于视口的,有相对于整个文档的,同样页面元素的位置也有相对视口的,也有滚动后的,这些都比较容易混淆, ...

  4. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

  5. scrollWidth,clientWidth,offsetWidth的区别

      通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包 ...

  6. 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  7. clientWidth、offsetWidth和scrollWidth的区分

    scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. off ...

  8. web前端学习笔记---scrollWidth,clientWidth,offsetWidth的区别

    通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动 ...

  9. 元素间距属性（scrollLeft,scrollWidth,clientWidth,offsetWidth,padding,margin）

    scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端 ...

  10. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...

随机推荐

  1. jenkins自动化部署项目6 --STMP服务发送邮件配置

    [系统管理]-[系统设置]里 1.系统管理员邮件地址:和后面SMTP配置认证的邮箱要一致,即发件箱   --------切记 2.配置SMTP认证的前提是需要在sohu搜狐邮箱开通SMTP/POP3, ...

  2. Find the Multiple POJ-1426

    题目链接:Find the Multiple 题目大意 找出一个只由0和1组成的能整除n的数. 思路 所有由0和1组成的数可以看作是某个只由0.1组成的数a经过以下两种变化得到 1.a * 10 2. ...

  3. supervisor配置kibana

    在/etc/supervisor/conf.d/目录下添加kibana.conf [program:kibana]command=/opt/kibana-6.8.1-linux-x86_64/bin/ ...

  4. 基于操作系统原理的Linux 的用户管理

    一.实验目的 1．掌握为root用户修改密码的方法. 2．掌握创建新用户的方法. 3．掌握用户组的管理方法. 4．掌握为用户授权的方法. 二.实验内容 1．Linux的用户管理 (1)创建新用户创建新 ...

  5. 2019年十大开源WEB应用防火墙点评

    2019年十大开源WEB应用防火墙点评 随着WEB应用的爆炸式成长和HTTPS加密的普及,针对网络应用层的攻击,像SQL注入.跨站脚本攻击.参数篡改.应用平台漏洞攻击.拒绝服务攻击等越来越多,传统的防 ...

  6. Python基础（十四）

    今日主要内容 装饰器扩展 有参装饰器 多个装饰器装饰一个函数 递归 一.装饰器扩展 (一)含有参数的装饰器 先来回顾一下装饰器的标准模式 def wrapper(fn): def inner(*arg ...

  7. ArchLinux安（重）装指南

    说实话,我其实是不想要出这篇博客的.在我这一个月安装Arch的过程中,让我感触比较深的一点是: 没有谁比这个系统的官方更懂它. 尤其是这种比较复杂的系统,更是如此. 这几天,我经历了一次重装,系统坏了 ...

  8. Spring GetBean流程

     第一节讲解Spring启动的时候说到,Spring内部先解析了所有的配置,加载所有的Bean定义后,再根据需要对Bean进行实例化和初始化.除开Spring自己主动新建的对象,第一次根据Bean定义 ...

  9. 代理（Proxy）设计模式

    目录 概述 静态代理 UML类图 代码实现 代码地址 静态代理的不足 动态代理之jdk实现 UML类图 代码实现 利用JDK实现动态代理的优点 利用JDK实现动态代理的不足 代码地址 动态代理之cgl ...

  10. Oracle 存储过程判断语句正确写法和时间查询方法

    判断语句:if 条件 then   if  条件  then ************;   elsif  条件  then  ************;   elsif 条件  then ***** ...