$(document).height();文档高度

最新推荐文章于 2024-03-20 09:23:44 发布
原创 最新推荐文章于 2024-03-20 09:23:44 发布 · 673 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了使用jQuery获取网页中元素的各种高度、位置和滚动条信息的方法，包括文档总高度、窗口高度、元素距离顶部的距离及滚动条的高度，是前端开发者进行页面布局和交互设计时的实用指南。

$(document).height();//文档高度

$(window).height();//是文档窗口高度

$("div").offset().top//是标签距离顶部高度

$(window).scrollTop();//是滚动条高度 和$(document).scrollTop()效果一样 但是$(window).scrollTop() 兼容性好

$(".footer").height();//是标签高度

 

浅谈DOCTYPE对$(window).height()取值的影响
09-01
而文档高度$(document).height()则是整个HTML文档的内容高度，包括超出可视区域的部分。正常情况下，如果页面内容未超过一屏幕，$(window).height()应该等于$(document).height()，因为整个文档都在视口内。但当页面...
由document.body和document.documentElement想到的
09-06
3. `document.body.scrollWidth`和`scrollHeight`表示元素的实际内容宽度和高度，即使内容超过了可视区域。 4. `document.body.scrollTop`和`scrollLeft`分别表示垂直和水平方向上的滚动量。 此外，`window`对象...
(document).height()与$(window).height()
aijue2015的博客
01-06 425
jQuery(window).height()代表了当前可见区域的大小，而jQuery(document).height()则代表了整个文档的高度，可视具体情况使用. 注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变，但是jQuery(document).height()是不变的。 $(document).sc...
$(document).height()获取文档的高度
jQuery,CSS,Asp.net及前端开放问题汇总
12-09 2596
通过《$(document).height()》获取文档的高度 需注意以下两点： 1.当$(document).height()放在head中时 获取的值与$(window).height() 值相同 即为文档可视区域的高度。 2.顾名思义 调用时需放在页面底部 页面加载完成后执行 此时的值才是正确的
$(window).height() 和 $(document).height()的区别
weixin_34185364的博客
11-28 497
  $(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小，$(document).height()则代表了整个文档的高度，可视具体情况使用. 当浏览器窗口大小改变时(如最大化或拉大窗口后) ，$(window).height() 随之改变，但是 $(document).height()是不变的。...
屏幕高度 和 document高度
anonymousstone的专栏
09-27 277
var clientHeight = screen.height - 312; var clientHeight = document.documentElement.clientHeight - 175;
$(document).height()与$(window).height()
FireBird_one的博客
05-31 1356
 $(window).height()代表了当前可见区域的大小，而$(document).height()则代表了整个文档的高度，可视具体情况使用.  注意当浏览器窗口大小改变时(如最大化或拉大窗口后) $(window).height() 随之改变，但是$(document).height()是不变的。 $(document).scrollTop() 获取垂直滚动的距离 即当前滚动的地方的窗口...
DEV EXPRESS 中 DocumentManager documentManager1 的 一个 Document.Height增大，为什么内部的Control.Height 没有变化
最新发布
11-29
2. **文档的AutoHeight属性**：DocumentManager的Document可能有AutoHeight属性，该属性控制文档是否自动调整高度以适合其内容。如果设置为true，则文档的高度由内容决定，而不是由外部容器决定。因此，手动改变...
用document.documentElement取代document.body的原因分析
09-05
此外，`screenTop`、`screenBottom`、`screenLeft`、`screenRight`、`screen.height` 和 `screen.width` 等属性提供了关于用户屏幕的信息，而 `availHeight` 和 `availWidth` 则是可用屏幕区域的高度和宽度，这对于...
$(document).height()、$(document).scrollTop()
QDY5945的博客
11-19 788
(document).height()、$(document).scrollTop()： jQuery(window).height()代表了当前可见区域的大小，而jQuery(document).h...
关于数据未渲染完，要获取document高度问题——ajax全局事件
ddr66288的博客
11-24 281
　　昨天在做开发时，遇到这样一个问题，当页面刚加载的时候，就要获取document的高度，可是此时页面上所有的ajax请求的数据都还没有渲染到页面上，所以导致得到的document的高度仅仅是页面结构的高度，而不是想要的结果，对于与这个问题，我琢磨了好久，怎么才能在ajax数据渲染完成之后获取到document的高度呢？我想过很多办法，但是都有弊端，比如： 　　1、设置延时器：让页面刚...
html/css基础篇——关于浏览器window、document、html、body高度的探究
ajb11683的博客
11-26 543
　　首先说明本人所理解的这几个元素的计算 　　window高度应当是文档所在窗口的可视高度（没有包括浏览器的滚动条），计算方法document.documentElement.clientHeight 　　document高度应该为文档内容的高度，计算方法Math.max(document.body[ "scrollHeight" ], document.documentElemen...
html窗口(window)高度、文档(document)高度介绍
热门推荐
u013488838的专栏
08-31 1万+
html窗口(window)高度、文档(document)高度介绍
$(document).height()与$(window).height()区别
FEE
08-30 2039
1.$(document).height()代表整个文档(页面)的高度 $(window).height()则代表当前可见区域的大小 所以当浏览器窗口大小发生变化时，$(document).height()值不变，$(window).height()发生变化2.$(document).scrollTop() 获取垂直滚动的距离 即当前滚动的地方的窗口顶端到整个页面顶端的距离 $(do
$(document).height()与$(window).height()的区别
ynjustme的博客
12-26 932
这俩个概念对很多人来说都很模糊，包括之前的我，现在来说一说他们的区别：            $(window).height()代表了当前可见区域的大小;            $(document).height()则代表了整个文档的高度，可视具体情况使用.(个人理解就是：html里body里面的内容)   *注意：当浏览器窗口大小改变时(如最大化或拉大窗口后) $(wi
jQuery $(document).height()与$(window).height()区别
_江屿_
03-20 562
jQuery $(document).height()与$(window).height()区别
document页面宽高度计算
weixin_34082854的博客
11-15 509
网页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽);网页可见区域高： document.body.offsetHeight (包括边线的宽);网页正文全文宽： document.body.scroll...
const textarea = this.$refs.textareaRef?.$el?.querySelector('textarea'); if (textarea) { textarea.style.height = 'auto'; textarea.style.height = textarea.scrollHeight + 'px'; } 为什么 textarea.scrollHeight 是 0
11-26
`textarea.scrollHeight` 是 `0` 的问题非常典型，尤其是在 **Vue 2 + Element UI** 中动态设置内容后尝试手动调整高度时。 我们来深入分析：为什么 `scrollHeight` 会是 `0`？以及如何彻底解决。 --- ## 🔍 为什么会 `scrollHeight === 0`？ ### ✅ 根本原因总结： > ❌ **`<textarea>` 元素不可见（display: none）或尚未渲染到 DOM 中 → 导致无法计算真实滚动高度** 浏览器只有在元素 **“处于文档流中且可见”** 的情况下才能正确计算 `scrollHeight`。否则返回 `0` 或错误值。 --- ## 🧨 常见导致 `scrollHeight = 0` 的场景 | 场景 | 说明 | |------|------| | 1. 组件被 `v-if="false"` 包裹 | 元素未插入 DOM，`$el` 为 `null` | | 2. 在 `el-dialog` 中，对话框还未完全打开 | `display: none`，元素不可见 | | 3. 使用了 `v-show="false"` | 虽然 DOM 存在，但 `display: none`，无法测量 | | 4. 异步数据更新太快，DOM 还没挂载 | 即使用了 `this.$nextTick()`，也可能不够 | --- ## ✅ 正确解决方案 ### ✅ 方案一：确保元素已“可见”后再读取 `scrollHeight` #### 示例：在 `el-dialog` 中的 textarea ```html <el-dialog :visible.sync="dialogVisible" @opened="onDialogOpened"> <el-input ref="textareaRef" v-model="form.description" type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" /> </el-dialog> ``` ```js data() { return { dialogVisible: false, form: { description: '' } }; }, methods: { openDialog() { this.form.description = '这是一段很长的内容...\n换行测试'; this.dialogVisible = true; // ❌ 不要在这里调 resize —— dialog 还没显示！ }, onDialogOpened() { // ✅ 此时 dialog 已经 visible，DOM 可见 this.$nextTick(() => { this.adjustTextareaHeight(); }); }, adjustTextareaHeight() { const textarea = this.$refs.textareaRef?.$el?.querySelector('textarea'); if (!textarea) { console.warn('找不到 textarea 元素'); return; } // 强制重置并重新计算高度 textarea.style.height = 'auto'; const height = textarea.scrollHeight; // 现在应该不是 0 了！ if (height > 0) { textarea.style.height = height + 'px'; console.log('✅ 成功设置高度:', height); } else { console.error('❌ scrollHeight 仍为 0，请检查是否可见'); } } } ``` --- ### ✅ 方案二：使用 `offsetHeight` / `clientHeight` 替代判断是否可见 你可以加一个判断： ```js const el = this.$refs.textareaRef?.$el; if (!el || el.offsetWidth === 0 || el.offsetHeight === 0) { console.warn('元素不可见，跳过高度计算'); return; } // 否则可以安全测量 const textarea = el.querySelector('textarea'); textarea.style.height = 'auto'; textarea.style.height = textarea.scrollHeight + 'px'; ``` 👉 `offsetWidth/offsetHeight === 0` 表示元素不可见。 --- ### ✅ 方案三：延迟执行（兜底） 如果上述方法都不行（比如动画过渡中），可以用 `setTimeout` 微延迟： ```js this.$nextTick(() => { setTimeout(() => { const textarea = this.$refs.textareaRef?.$el?.querySelector('textarea'); if (textarea && textarea.scrollHeight > 0) { textarea.style.height = 'auto'; textarea.style.height = textarea.scrollHeight + 'px'; } else { console.warn('scrollHeight 仍然为 0，可能需要更长等待'); } }, 50); // 小小延迟，确保 display 已变为 block }); ``` > ⚠️ 注意：不要滥用 `setTimeout`，优先用事件驱动如 `@opened`。 --- ### ✅ 方案四：触发一次强制重绘（Force Reflow） 有时候浏览器优化了渲染流程，即使元素可见也不立即布局。可以通过强制 reflow 解决： ```js adjustTextareaHeight() { const textarea = this.$refs.textareaRef?.$el?.querySelector('textarea'); if (!textarea) return; // 🔥 强制浏览器重新计算布局 const dummy = document.body.offsetHeight; // 读取任意 layout 属性即可触发 reflow textarea.style.height = 'auto'; const sh = textarea.scrollHeight; if (sh > 0) { textarea.style.height = sh + 'px'; } else { console.error('scrollHeight 依然为 0，建议检查 DOM 可见性'); } } ``` 这个技巧利用了“读取 offsetXXX 属性会强制同步布局”的机制。 --- ## ✅ 验证 `scrollHeight` 是否可用的小工具函数 ```js function getVisibleScrollHeight(textarea) { if (!textarea) return 0; const style = window.getComputedStyle(textarea); const parentStyle = window.getComputedStyle(textarea.parentNode); // 检查是否隐藏 if ( style.display === 'none' || parentStyle.display === 'none' || style.visibility === 'hidden' || parseInt(style.width) === 0 || parseInt(style.height) === 0 ) { return -1; // 表示不可见 } return textarea.scrollHeight; } ``` 使用方式： ```js this.$nextTick(() => { const ta = this.$refs.textareaRef?.$el?.querySelector('textarea'); const h = getVisibleScrollHeight(ta); if (h > 0) { ta.style.height = h + 'px'; } else if (h === -1) { console.warn('textarea 当前不可见，无法测量高度'); } }); ``` --- ## ✅ 最佳实践建议 | 场景 | 推荐做法 | |------|---------| | `el-dialog` 内部 | 使用 `@opened` 事件触发 resize | | `v-show` 控制 | 确保 `v-show="true"` 后再调用 | | 动态加载数据 | `this.$nextTick(() => { ... })` + 判断可见性 | | 多层嵌套组件 | 手动暴露 `resize` 方法或使用 `$attrs/$listeners` | --- ## ✅ 总结 | 问题 | 原因 | 解决方案 | |------|------|-----------| | `scrollHeight === 0` | 元素未渲染或不可见 | 等待 `@opened`、`v-if` 生效 | | `$refs.textareaRef` 存在但 `scrollHeight=0` | 浏览器未重排 | 用 `offsetHeight` 触发 reflow | | 动态赋值后不撑开 | `autosize` 未检测到变化 | 手动调 `resizeTextarea()` 或原生撑高 | ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值