scrollWidth、clientWidth 和 offsetWidth
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的更多相关文章
- scrollWidth,clientWidth与offsetWidth的区别
scrollWidth 是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度). clientWidth 是对象可见的宽度,不包滚动条等边线,会随窗口的显 ...
- 【clientX，offsetX，screenX】 【scrollWidth，clientWidth，offsetWidth】的区别
一.深刻认识clientX,offsetX,screenX 概念(来源于网络): clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clie ...
- 页面元素坐标和偏移（clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等）相关整理
鼠标事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的坐标位置,有相对于视口的,有相对于整个文档的,同样页面元素的位置也有相对视口的,也有滚动后的,这些都比较容易混淆, ...
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...
- scrollWidth,clientWidth,offsetWidth的区别
通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包 ...
- 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
- clientWidth、offsetWidth和scrollWidth的区分
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. off ...
- web前端学习笔记---scrollWidth,clientWidth,offsetWidth的区别
通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动 ...
- 元素间距属性（scrollLeft,scrollWidth,clientWidth,offsetWidth,padding,margin）
scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端 ...
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...
随机推荐
- 使用uEdit时，在线管理图片功能不可用
把所有的配置文件都配置好了,uedit的在线管理功能图片还是不可用,看了一下源码: 是的,它在img的src属性后边的图片上加上了参数,那肯定不能用啊,所以修改源文件image.js.直接搜索noCa ...
- WordPress对接微信小程序遇到的问题
1.文章内容中的“<”和“>”字符显示问题 小程序是使用“wxPares工具来实现html转wxml的,如果你的文本包含了代码比如xml会携带<>符号,程序会将其转化,造成解析 ...
- Ubuntu+docker+gitlab安装和使用
以前自己写的代码都是在本地,因为都是自己一个人维护,现在交给团队维护了,所以想着搭建一个gitlab 1,拉镜像 安装非常简单 docker search gitlab 搜索镜像 docker pu ...
- PyCharm设置自己的默认模板
1.File-Settings 2.Editor- Code Style - File and Code Templates - Python Script 需要设置什么内容,现在就可以写入了,相关变 ...
- SpringBoot定时任务，总有一款适合你
title: SpringBoot定时任务,总有一款适合你 date: 2019-09-28 16:19:10 tags: - springboot - 定时任务 categories: java - ...
- Spring 梳理-使用<context:property-placeholder>标签导入多个properties文件
使用<context:property-placeholder>标签导入多个properties文件 2017年12月20日 10:10:36 sf_climber 阅读数:5830更多 ...
- Spring MVC-从零开始-@ResponseBody（未完待续）
Spring MVC-从零开始-@ResponseBody(未完待续)
- 死磕 java同步系列之zookeeper分布式锁
问题 (1)zookeeper如何实现分布式锁? (2)zookeeper分布式锁有哪些优点? (3)zookeeper分布式锁有哪些缺点? 简介 zooKeeper是一个分布式的,开放源码的分布式应 ...
- 【SQL server基础】objectproperty()函数
SQL Server OBJECTPROPERTY使用方法 OBJECTPROPERTY 返回有关当前数据库中的模式作用域对象的信息.此函数不能用于不是模式范围的对象,例如数据定义语言(DDL)触 ...
- java几个常见的基础错误
1.String 相等 稍微有点经验的程序员都会用equals比较而不是用 ==,但用equals就真的安全了吗,看下面的代码 user.getName().equals("xiaoming ...