clientWidth offsetWidth等视窗尺寸
clientWidth和offsetWidth
clientWidth
是一个只读属性，返回元素的内部宽度，该属性包括内边距，但不包括垂直滚动条(如果有)、边框和外边距。
offsetWidth
是一个只读属性，返回一个元素的布局宽度。一个典型的offsetWidth是测量包含元素的边框、水平线上的内边距、竖直方向滚动条(如果有的话)、以及CSS设置的宽度(width)值。
用法：var offsetWidth = element.offsetWidth;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#parent {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="parent"></div>
<script>
var clientWidth = window.document.getElementById("parent").clientWidth;
var offsetWidth = window.document.getElementById("parent").offsetWidth;
console.log(clientWidth); //200
console.log(offsetWidth); //200
</script>
</body>
</html>当我们给上面parent元素加上边框内边距时：
#parent {
width: 200px;
height: 200px;
background-color: red;
border: 10px solid black;
padding: 10px;
}输出结果为：
// 220
// 240
现在我们给parent加一个子元素，并让滚动条出现，完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#parent {
width: 200px;
height: 200px;
background-color: red;
border: 10px solid black;
padding: 10px;
overflow: auto;
}
#son {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="parent">
<div id="son"></div>
</div>
<script>
var clientWidth = window.document.getElementById("parent").clientWidth;
var offsetWidth = window.document.getElementById("parent").offsetWidth;
console.log(clientWidth);
console.log(offsetWidth);
</script>
</body>
</html>显示结果如图：
输出信息如下：
// 205
// 240
对于上述代码作个简要说明，clientWidth值为205是这样计算来的：原本我们设置parent的宽度为200,因为我们设置了父元素overflow:scroll属性出现滚动条后，滚动条宽度被包括在这个设置的宽度之内。chrome浏览器滚动条默认宽度为15，所以parent宽度就只剩185.按照上面clientWidth定义来计算，clientWidth = 185(实际width) + 10(padding) + 10(padding).
未完待续
clientWidth offsetWidth等视窗尺寸的更多相关文章
- H5,PC网页屏幕尺寸相关整理(scrollLeft,scrollWidth,clientWidth,offsetWidth)
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解scrollHeight: 获取对象的滚动高度. scrollLef ...
- JS中关于clientWidth offsetWidth scrollWidth 的区别及意义
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...
- scrollLeft,scrollWidth,clientWidth,offsetWidth 可实现导航栏固定不动（冻结）的效果
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位 ...
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释scrollHeight: 获取对象的滚动高度. scrol ...
- clientWidth,offsetWidth,scrollWidth区别
<html> <head> <title>clientWidth,offsetWidth,scrollWidth区别</title> </head ...
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详细的说明
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth具体指完全解释究竟哪里的距离scrollHeight: 获取对象的高度滚动. scrollLe ...
- 转 HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...
随机推荐
- 给创业公司CEO的临别赠言
一别两宽,各生欢喜 2018年2月8日,我在这个公司的最后一天,三年半. 还记得2014年,在三里屯SOHO的某个咖啡厅中,你自信飞扬的脸和眼睛里暗夜星辰般的闪亮的希冀让我久久无法平静.终于在某一个耀 ...
- 常用JS图片滚动（无缝、平滑、上下左右滚动）
常用JS图片滚动(无缝.平滑.上下左右滚动)代码大全 <head><-----></head><body> <!--向下滚动代码开始-->& ...
- CentOS-DHCP服务搭建
title date tags layout CentOS6.5 DHCP服务器搭建 2018-08-26 Centos6.5服务器搭建 post 1.安装dhcp软件包 yum install -y ...
- peewee 对 mysql 类型支持问题，并不支持bit
这个问题是当时想当然了 看到python BooleanField(default=False) 便认为 对应 mysql的bit 出现问题 mysql实际字段存储值为0,但 peewee orm 后 ...
- webStrom 运行React-Native项目
1.点击“Edit Configurations...” 2.点击“+”选择“npm” 3.“Name”随便输入一个名称,“Command”改为“help”,然后在点击“+”号. 4.选择“Run E ...
- 3DSMAX卸载/完美解决安装失败/如何彻底卸载清除干净3DSMAX各种残留注册表和文件的方法
在卸载3dsmax重装3dsmax时发现安装失败,提示是已安装3dsmax或安装失败.这是因为上一次卸载3dsmax没有清理干净,系统会误认为已经安装3dsmax了.有的同学是新装的系统也会出现3ds ...
- python中coding:utf-8的作用
或者
- 解决Eclipse和MyEclipsejava.lang.OutOfMemoryError Java heap space的错误
Eclipse和MyEclipse出现错误:java.lang.OutOfMemoryError: Java heap space的错误,很熟悉的错误信息,可咋就想不起来在哪里设JVM的参数啊.请看下 ...
- Ubuntu和window10 安装双系统
先安装window10,然后空出一部分储存空间,我空出来了103G. 然后安装ubuntu分区的时候注意: 刚开始安装的时候:出现安装类型的时候:选择其他选项: 在分区的时候:单击127117(这里是 ...
- 分布式文件系统与HDFS
HDFS,它是一个虚拟文件系统,用于存储文件,通过目录树来定位文件:其次,它是分布式的,由很多服务器联合起来实现其功能,集群中的服务器有各自的角色. HDFS 的设计适合一次写入,多次读出的场景,且不 ...