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 ...
随机推荐
- （七十四）c#Winform自定义控件-金字塔图表
前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kwwwvagaa/NetWinformControl 码云:ht ...
- 高通电源管理qpnp-vm-bms驱动
1. compatible节点: qpnp-vm-bms.c使用来控制电池曲线的和BMS功能的,其compatible节点是"qcom,qpnp-vm-bms" 2. probe函 ...
- WinServer 2012 R2 安装python3.6时出现错误：0x80240017 导致安装失败
解决方法: 依次检查并更新补丁:KB2919442,KB2919355,kb2999226 KB2919442:https://www.microsoft.com/zh-cn/download/det ...
- 导出wordpress数据库Fatal error: Cannot 'break' 2 levels
今天我打算备份一下我在Linux下用宝塔面板搭建的phpmyadmin导出wordpress数据库.选择数据库后给我一个Fatal error: Cannot 'break' 2 levels in ...
- 一个selenium简单案例自动添加数据
//本来想着用execl来录入数据的,但是为了尽快完成所以直接搞了个数组 package aldtest; import org.openqa.selenium.*; import org.openq ...
- Java入门系列之hashCode和equals（十二）
前言 前面两节内容我们详细讲解了Hashtable算法和源码分析,针对散列函数始终逃脱不掉hashCode的计算,本节我们将详细分析hashCode和equals,同时您将会看到本节内容是从<E ...
- Oozie、Flume、Mahout配置与应用
-------------------------Oozie-------------------- [一.部署] 1)部署Oozie服务端 [root@cMaster~]#sudo yum inst ...
- 23种设计模式之责任链模式（Chain of Responsibility Pattern）
责任链模式(Chain of Responsibility Pattern)为请求创建了一个接收者对象的链.这种模式给予请求的类型,对请求的发送者和接收者进行解耦.这种类型的设计模式属于行为型模式. ...
- 今天第一次解决了程序在未装VS和XP下运行的问题
http://www.cnblogs.com/zero5/p/3162948.html 一位素不相识的朋友做的代码雨屏保程序 - 残雪孤侠 - 博客园 上面是我的BLOG 群共享里,有程序和代码 ...
- scalikejdbc 学习笔记(2)
使用scalikejdbc config (src\main\resources) # MySQL(dev) dev.db.default.driver="com.mysql.jdbc.Dr ...