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. SpringBoot起飞系列-日志使用（四）

    一.SpringBoot中的日志组件 日志是一个系统中不可缺少的组件.在项目中,我们常用的日志组件有JUL.JCL.Jboss-logging.logback.log4j.log4j2.slf4j.. ...

  2. 基于Docker搭建大数据集群（五）Mlsql部署

    主要内容 mlsql部署 前提 zookeeper正常使用 spark正常使用 hadoop正常使用 安装包 微云下载 | tar包目录下 mlsql-cluster-2.4_2.11-1.4.0.t ...

  3. Appium与Appium Desktop的区别

    Appium-Server的配置,在之前的博文已有介绍,基于Python的Appium环境搭建合集,所以在此处就不详细介绍了.今天主要来分享下Appium-Server和Appium desktop在 ...

  4. maven 打包构建相关命令

    1.命令 mvn clean package 依次执行clean.resources.compile.testResources.testCompile.test.jar(打包)等7个阶段. mvn ...

  5. idea设置方法或常量字段上浮显示对应的注释内容

    1.进入idea中,如下图进入设置 如图勾选并设置显示延迟时间 打开文件进行鼠标移动测试 可以看到鼠标移动到字段常量或方法上时显示了对应的注释类容

  6. 浏览器端获取短信验证码java实现——阿里云短信服务

    需求:浏览器端输入手机号,获取验证码.点击登录,验证验证码是否输入错误.是否超时等情况,一旦校验通过,将用户数据保存到数据中(业务逻辑). 前提:注册阿里用户,开通短信服务,申请key.秘钥.签名.短 ...

  7. layer.open打开一个新的jsp页面，如何关闭并刷新父页面问题

    layer.open打开一个新的jsp页面弹框,如何关闭呢? 在新的页面提交完毕之后,关闭并刷新父页面列表. layer.closeAll(); parent.layer.closeAll(); wi ...

  8. 深入理解 DeepSea 和 Salt 部署工具 - Storage6

    学习 SUSE Storage 系列文章 (1)SUSE Storage6 实验环境搭建详细步骤 - Win10 + VMware WorkStation (2)SUSE Linux Enterpri ...

  9. 夯实Java基础系列14：深入理解Java枚举类

    目录 初探枚举类 枚举类-语法 枚举类的具体使用 使用枚举类的注意事项 枚举类的实现原理 枚举类实战 实战一无参 实战二有一参 实战三有两参 枚举类总结 枚举 API 总结 参考文章 微信公众号 Ja ...

  10. Jmeter定时器：Precise Throughput Timer使用

    百度上这方面资料很少,google上有一些,我试着总结一下. Precise Throughput Timer 是Jmeter4.0添加的新功能,直接摘录一段英文: The Precise Throu ...