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 ...
随机推荐
- Spring MVC-从零开始-web.xml中classpath和classpath* 有什么区别
web.xml中classpath和classpath* 有什么区别?classpath:只会到你的class路径中查找找文件;classpath*:不仅包含class路径,还包括jar文件中(cla ...
- 容器技术----------->Docker
1. 虚拟化 1)什么是虚拟化 在计算机中,虚拟化(英语:Virtualization)是一种资源管理技术,是将计算机的各种 实体资源,如服务器.网络.内存及存储等,予以抽象.转换后呈现出来,打破实体 ...
- 挑战程序设计——迷宫的最短路径（BFS）
题目详情 Description 给定一个大小为 N * M 的迷宫.迷宫由通道和墙壁组成,每一步可以向邻接的上下左右四格的通道移动.请求出从起点到终点所需的最小步数 限制条件: N,M <= ...
- 在github上部署第二个repository
想在github上保存一些平时写的测试程序,所以就建立了一个repository:https://github.com/commshare/testProgram 建立好之后,怎么把本地的代码上传呢. ...
- C语言复习————基本数据类型、运算符和表达式
数据类型/运算符/表达式 主要分两部分介绍,第一部分介绍常用的数据类型,例如:常量和变量/整型/实型/字符型:第二部分介绍算数运算符和算数表达式以及赋值运算符和逗号运算符. 一. 常用的数据类型 1. ...
- Go标准库Context
在 Go http包的Server中,每一个请求在都有一个对应的 goroutine 去处理.请求处理函数通常会启动额外的 goroutine 用来访问后端服务,比如数据库和RPC服务.用来处理一个请 ...
- Spring入门之AOP实践：@Aspect + @Pointcut + @Before / @Around / @After
零.准备知识 1)AOP相关概念:Aspect.Advice.Join point.Pointcut.Weaving.Target等. ref: https://www.cnblogs.com/zha ...
- java面试宝典2019(好东西先留着)
java面试宝典2019 1.meta标签的作用是什么 2.ReenTrantLock可重入锁(和synchronized的区别)总结 3.Spring中的自动装配有哪些限制? 4.什么是可变参数? ...
- ARP攻击原理简析及防御措施
0x1 简介 网络欺骗攻击作为一种非常专业化的攻击手段,给网络安全管理者,带来严峻的考验.网络安全的战场已经从互联网蔓延到用户内部的网络, 特别是局域网.目前利用ARP欺骗的木马病毒在局域网中广泛传 ...
- Openshift 部署第一个应用hello-openshift
Openshift 部署第一个应用hello-openshift: cd /opt/ wget https://github.com/openshift/origin/releases/downloa ...