clientWidth、offsetWidth和scrollWidth的区分
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。
offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。
情况1:
元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下。
scrollWidth=clientWidth,两者皆为内容可视区的宽度。
offsetWidth为元素的实际宽度。
情况2:
元素的内容超过可视区,滚动条出现和可用的情况下。
scrollWidth>clientWidth。
scrollWidth为实际内容的宽度。
clientWidth是内容可视区的宽度。
offsetWidth是元素的实际宽度。
clientWidth、offsetWidth和scrollWidth的区分的更多相关文章
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...
- 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
- 元素间距属性(scrollLeft,scrollWidth,clientWidth,offsetWidth,padding,margin)
scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端 ...
- 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 ...
- HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解
scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最 ...
- JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((docume ...
- JS中关于clientWidth offsetWidth scrollWidth 的区别及意义
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
随机推荐
- java 存储到什么地方
下面的内容主要来源于<Thinging in Java> 这本书的第22页讲到的,有5个不同的地方可以存储数据: 1).寄存器 这是最快的存储区,因为它位于处理器内部(没错,如果学过计算机 ...
- 前端学习 第四弹: HTML(一)
前端学习 第四弹: HTML(一) 元素分类:块元素 内联元素 块级元素在浏览器显示时,通常会以新行来开始(和结束). 例子:<h1>, <p>, <ul>, &l ...
- Debian普通用户获取root权限|sudo的安装与配置
Debian系统的普通用户需要安装软件时,往往会收到“Permission denied”的提示,这时候需要root权限.那么如何在不登陆超级管理员账户的前提下拥有root权限呢?对于大多数Linux ...
- TD Rigging Demo Reel 性感美女绑定展示
161455520158189 这是一个充满回忆的Demo,非常怀念之前的工作生活,也特别感谢我长春的老哥张总对我的帮助与指导,不光是工作中,在生活上也让我有很大的收获.这个一直都觉得做的不够好,也从 ...
- 跟我学Windows Azure 一 创建Windows Azure试用账号
我在网上看了很多教程,很大部分都是申请的是国外或者是香港的试用账号,而国内是由世纪互联所代理的,他的申请方式与VS2013的部署设置或多或少还是有些出入,这里我先跟大家一起过一下,在国内如何申请一个w ...
- Windows下面如何建立多个Django虚拟环境
Linux 安装请见另一篇博客 http://www.cnblogs.com/zhaoyingjie/p/6180758.html 1.安装 virtualenv 2.安装virtualenvwrap ...
- python fork 用法
import os import sys ips = ( "192.168.45.%s" % i for i in range(1,255)) for ip in ips: pid ...
- Python3.5 用 pip 安装lxml时出现 “Unable to find vcvarsall.bat ”?(转载)
来自:https://www.zhihu.com/question/26857761 解决步骤: 1. 安装wheel,命令行运行: pip install wheel 2.在这里下载对应的.whl文 ...
- 【性能诊断】StackOverflow引发的“网络”及系统稳定性问题
背景描述: 最近一个项目的系统管理员和业务运维人员分别反馈问题: 1.应用系统每个月会有一两次宕机,需要管理员手工重启IIS: 2.财务模块一个功能经常报网络错误“网络异常,请检查网络连接”“Unab ...
- AI(二):人脸识别
微软提供的人脸识别服务可检测图片中一个或者多个人脸,并为人脸标记出边框,同时还可获得基于机器学习技术做出的面部特征预测.可支持的人脸功能有:年龄.性别.头部姿态.微笑检测.胡须检测以及27个面部重要特 ...