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. git远程操作相关命令(remote 、push、fetch 、pull)

    git remote 为了便于管理,Git要求每个远程主机都必须指定一个主机名.为了便于管理,Git要求每个远程主机都必须指定一个主机名. git remote[查看创库名] git remote 在 ...

  2. 工厂模式(整理自李建忠<C++设计模式>视频)

    整理自李建忠<C++设计模式>视频 一.导入:"对象创建"模式和工厂模式 工厂模式只是该模式下的一种. 二.举例说明 有这样一个场景:需要在MainForm中设计一个按 ...

  3. JS 取整、取余

    一.取整 1. 取整 // 丢弃小数部分,保留整数部分 parseInt(7/2) // 3 2. 向上取整 // 向上取整,有小数就整数部分加1 Math.ceil(7/2) // 4 3. 向下取 ...

  4. 关于win10、ubuntu双系统安装的 geom erro错误

    安装参考这个博客:http://blog.csdn.net/pop_rain/article/details/70477085 只记录安装ubuntu过程遇到的问题: 1.分区不可用(分区按以下设置) ...

  5. navicat安装及其简单使用

    一.安装 下载地址:https://pan.baidu.com/s/1bpo5mqj 下载完之后,直接解压出来就能用,看一下解压之后的目录: 双击打开下面这个文件(可以把它添加一个桌面快捷方式,或者添 ...

  6. tensorflow中添加L2正则化损失

    方法有几种,总结一下方便后面使用. 1. tensorflow自动维护一个tf.GraphKeys.WEIGHTS集合,手动在集合里面添加(tf.add_to_collection())想要进行正则化 ...

  7. MakaJs：基于 React, Redux 的轻量级前端框架

    github: maka.js 留下您宝贵的STAR!谢谢 maka maka源于中文码咖,意为写代码的大咖 一眼即可看懂的前端框架,简约而不简单 1.安装 bash sudo npm i -g @m ...

  8. IT爱心求助站

    最近发生的一些事情,让我对自己的专业有了另外一层认识. 小尹同学,你是做软件的是吗?能否帮我看一下我的电脑问题? 老同学,我的电脑安装一个软件这么都装不上,能否帮我看一下呢? 邻居你好,我的手机怎么没 ...

  9. SQL server数据库系统部分常用的存储过程及说明

    --SQL server数据库系统常用的存储过程 exec sp_databases --能看到所有具有权限的数据库名,大小和备注 exec sp_helpdb --数据库名,大小,管理员,创建时间状 ...

  10. 2019滴滴php面试总结 (包含面试题解析)

    2019滴滴java面试总结  (包含面试题) 本人6年开发经验.今年年初找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.滴滴等公司offer,岗位是既有php也有Java后端开发,最终选择去了滴滴 ...