网页尺寸scrollHeight

最新推荐文章于 2022-11-29 16:40:34 发布
最新推荐文章于 2022-11-29 16:40:34 发布
阅读量369 收藏
点赞数 1
分类专栏： Javascript从入门到放弃

scrollHeight和scrollWidth，获取网页内容高度和宽度。

一、针对IE、Opera:

scrollHeight 是网页内容实际高度，可以小于 clientHeight。

二、针对NS、FF:

scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。

三、浏览器兼容性

var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;

注意:区分大小写

scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。

任务

在script标签内，补充右边编辑器代码，获取网页的实际宽度和高度


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 


</head>
<body>
<script type="text/javascript">
var w=document.documentElement.scrollWidth||document.body.scrollWidth;
var h=document.documentElement.scrollHight||document.body.scrollHeight;
document.write("宽是"+w+"高是"+h);
</script>
</body>    
</html>

恍惚小盆友
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS 各种网页尺寸判断实例方法
12-08
 var scrollHeight = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop; } else if (document.body) { scrollTop = document.bod
JS获取scrollHeight问题想到的标准问题
10-30
如果没有文档声明可以用 document.body.scrollHeight,如果有文档声明必须用 document.documentElement.scrollHeight关于这方面的东西
document.body为空或不是对象或者为什么获取不到document.documentElement.scrollHeight的值...
weixin_30501857的博客
03-19 1433
当我们在<head></head>标记之间的script中，引用document.body时，会出现document.body为空或不是对象，这时可将js代码移至<body></body>标签之间，该问题即可解决。 下面说说将js代码放在<head></head>和<body></body&gt...
srcollTop、clientHeight、scrollHeight详解
记录点滴
10-16 769
原生js： scrollTop —— 滚动条滚动的距离（注意：不是滚动条距顶端的距离） scrollHeight —— 文档内容的实际高度，包含超出视图溢出的部分 clientHeight —— 窗口可视范围的高度 当clientHeight + scrollTop >= scrollHeight时，表示已经抵达内容的底部了，可以加载更多内容。 scrollTop： 可以通过 window.pageYOffset 或 document.documentElement.scro...
关于scrollHeight
antelope_2014的博客
11-29 163
scrollHeight:这个属性就比较麻烦了,因为它们在火狐跟IE下简直差太多了..在火狐下还很好理解,它其实就是滚动条可滚动的部分还要加上boder的高度还要加上横向滚动条不可用的高度 scrollHeight=滚动条可滚动的部分+border的高度+横向滚动条不可用的高度；在IE中 scrollHeight确是指这个对象它所包含的对象的高度加上boder的高度和marging,如...
scrollHeight实测
csx blog
11-29 581
scrollHeight = 实际内容尺寸 + padding。
18.网页尺寸scrollHeight
weixin_34288121的博客
03-10 89
scrollHeight和scrollWidth，获取网页内容高度和宽度(不包括滚动条)。 一、针对IE、Opera: scrollHeight 是网页内容实际高度，可以小于 clientHeight。 二、针对NS、FF: scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight...
js获取窗口滚动条高度、窗口可视范围高度、文档实际内容高度、滚动条离浏览器底部的高度...
weixin_30847939的博客
07-30 316
1.获取窗口可视范围的高度 //获取窗口可视范围的高度 function getClientHeight(){ var clientHeight=0; if(document.body.clientHeight&&document.documentElement.clientHeight){ var clientHeight...
解析offsetHeight,clientHeight,scrollHeight之间的区别
09-04
主要是对offsetHeight,clientHeight,scrollHeight之间的区别进行了详细介绍，需要的朋友可以过来参考下，希望对大家有所帮助
div 中scrollHeight offsetHeight 等的用法
06-09
此图片更加直观的显示了offsetHeight以及scrollHeight等的用法
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
10-28
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍，需要的朋友可以看看
html5 scrollheight,scrollHeight和scrollWidth，获取网页内容高度和宽度不正确
weixin_42300121的博客
06-19 663
问题如下图所示，高度明显不正确，请问问题出在哪，希望能给出详细解释。另外，希望能再具体解释下document.documentElement.clientHeight、window.innerHeight、document.documentElement.scrollHeight及document.body.clientHeight之间的关系，发现document.body.clientHeigh...
webview document.body.scrollHeight 获取的高度不准确
XiaoZhuang__的博客
05-28 983
解决方案 1、给富文本加上meta标签 适配移动端 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> 2、我们对img进行处理 <style type="text/css"> img{ display: inline-block; max-width: 100%; } </style&gt
scrollTop、scrollLeft、scrollWidth、scrollHeight
温大侠的博客
07-27 491
scroll系列的这几个属性都是和滚动有关的,上代码: <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>
获取对象实际高度scrollHeight
嘟哝什么
08-10 1690
获取对象的实际高度，包括overflow：hidden；等未显示的高度var $ceshi = DOM; $ceshi[0].scrollHeight;切记 一定要加上[0]
scrollHeight在IE和FF下的区别
fengshujuan
12-22 202
/**  *调整滚屏出现的弹出div位置差别的现象，这个只在IE下才有，在ff下不用调整  */ function getScollTop(){     var eleHeight;     if(document.documentElement){         eleHeight = document.documentElement.scrollHeight-document.d...
clientHeight、offsetHeight、scrollHeight三者区别与浏览器表现
Soochow_zhangyu的博客
11-26 1347
提要 clientHeight指客户区高度，本应该返回浏览器可见区域高度，但是，前面的元素如果不是documentElement，则返回盒子高度（包括填充和边框） offsetHeight指偏移之后的高度，offsetTop和offsetLeft分别指当前元素相对于父元素的偏移（也就是外边距），故offsetHeight则是指元素本身高度（包括填充和边框），不过，在IE11以下的版本，如果前缀元...
protobuf-3.15.7-cp38-cp38-macosx_10_9_x86_64.whl
最新发布
06-17
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
scrollheight属性
07-27
scrollHeight属性是用来表示元素内容的总高度，包括那些在视口中不可见的部分。它返回一个数字，表示元素内容的高度。通常情况下，scrollHeight大于元素的可见高度，这意味着需要滚动才能查看全部内容。\[3\] #### 引用[.reference_title] - *1* *2* [JS中scrollHeight,clientHeight、scrollTop、offsetTop等相关属性介绍](https://blog.csdn.net/qq_39352650/article/details/109255686)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [【JavaScript】scrollTop和scrollHeight](https://blog.csdn.net/XiugongHao/article/details/131357388)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值