文档章节

offsetHeight,scrollHeight,clientHeight,offsetWidth,clientWidth,scrollWidth的意义

溪语_8023
 溪语_8023
发布于 2016/12/01 15:58
字数 251
阅读 2
收藏 0

offsetHeight:带边框的高度,带滚动条的高度

scrollHeight:正文的高度,不包括滚动条和边框

clientHeight:对象可视的高度

 

offsetWidth当前对象的宽度(Width+border+padding)包括滚动条等边线,会随着对象的显示而变化。style.width 也是表示对象的宽度。但是他们两个是有区别的,①如果页面中的元素设置为百分比,无论页面变大或者变小,style.width返回值的宽度是百分比,而offsetWidth 返回值是数据;②style.width:如果元素没有设置width,则style.width返回值是空。③style.width返回值除了数据之外还会返回单位px。

clientWidth 对象内容的可视区的宽度,不包括滚动条和边线,会随着对象显示的大小而变化。

scrollWidth 对象实际内容的宽度,会随着对象内容增多或减少来改变。

 

© 著作权归作者所有

共有 人打赏支持
溪语_8023
粉丝 0
博文 27
码字总数 17289
作品 0
杭州
获取屏幕宽度、浏览器宽度、网页高度,宽度信息

视图模式innerWidth/innerHeight属性(窗口大小) window.innerHeight window.innerWidth window.pageYOffset:Netscape属性,指的是滚动条顶部到网页顶部的距离 网页可见区域宽:document.bo...

飞奔的土豆
2014/09/05
0
0
CSSOM View Module 中的尺寸与位置属性

指 CSS Object Model,即 CSS对象模型。CSSOM 是 JavaScript 操纵 CSS 的一系列 API 集合,它属是 DOM 和 HTML API 的附属。 其中视图模型(View Model)中定义了一系列接口,包括多个关于窗...

yinyongcom666
2016/03/28
10
0
HTML布局定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全带图详解

网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线的宽); 网页可见区域高: document.bod...

ibm_hoojo
2010/09/29
0
0
HTML中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scroll...

Aaron_DMC
2016/11/18
50
0
轻松弄清JavaScript中的offset、scroll、client

初次见到这张图,觉得好乱额,所以下面我们来慢慢理顺这个东西。 一、理顺offset 在这里我们可以看到,关于offset共有5个东西需要弄清楚:   1、offsetParent   2、offsetTop   3、off...

longteng2013
2013/10/06
0
2

没有更多内容

加载失败,请刷新页面

加载更多

day96-20180923-英语流利阅读-待学习

英国王子也不看好人工智能,理由却和霍金不同 Daniel 2018-09-23 1.今日导读 2016 年 3 月 9 日至 15 日,世界围棋冠军李世石与谷歌研发的计算机围棋程序 AlphaGo 进行人机大战并以 1 比 4 ...

飞鱼说编程
7分钟前
0
0
今天在码云遇到一个很有意思的人 for Per.js

今天在码云遇到一个很有意思的人,他在我的Per.js项目下面评论了一句,大意为“你试试这句代码,看看速度到底是你快还是Vue快”【当然,这个评论被我手残不小心删掉了...】。 然后我就试了,...

Skyogo
12分钟前
13
0
Java -------- 首字母相关排序总结

Java 字符串数组首字母排序 字符串数组按首字母排序:(区分大小写) String[] strings = new String[]{"ba","aa","CC","Ba","DD","ee","dd"}; Arrays.sort(strings); for (int i ...

切切歆语
13分钟前
0
0
还在用 Git 的 -f 参数强推仓库,你这是在作死!

最近,美国一个程序员因为同事不写注释,代码不规范,最严重的是天天使用 git push -f 参数强行覆盖仓库,该程序员忍无可忍向四名同事开抢,其中一人情况危急!!! 不写注释、代码不规范是一...

红薯
27分钟前
241
0
NPM报错终极大法

所有的错误基本上都跟node的版本相关 直接删除系统中的node 重新安装 sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*} 重新安装 $ n lts$ npm...

lilugirl
31分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部