offsetHeight及其他

最新推荐文章于 2020-08-07 13:08:10 发布
转载 最新推荐文章于 2020-08-07 13:08:10 发布 · 565 阅读 · 0

本文详细介绍了网页的各种尺寸参数，包括可见区域、滚动位置、屏幕分辨率等，并对比了不同浏览器如IE与Firefox在这些参数上的差异。此外还提供了HTML元素定位的相关属性说明。
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth


HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE，FireFox 差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：
clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height


(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)



offsetHeight在OnLoad中获取为0的现象
09-05
`offsetHeight` 是一个非常重要的 JavaScript 属性，它用于获取一个元素的总高度，包括内边距、边框，但不包括外边距。然而，在某些特定情况下，尤其是在页面加载（OnLoad）事件中尝试获取 `offsetHeight` 时，可能...
火狐在用offsetHeight获取div的高度时为0的解决方法
09-25
由于浮动元素的这种特殊行为，如果父元素没有设置高度或者没有其他元素撑开，那么使用offsetHeight获取父元素的高度时可能得到0值，因为父元素的布局高度并没有被浮动元素影响的其他内容所撑开。 为了解决这个问题...
解析offsetHeight,clientHeight,scrollHeight之间的区别
thlzjfefe的博客
10-27 330
在网上搜了一下，结论非常笼统，讲IE从不讲版本，因此自己做了测试并上传结论。以下结论皆是在标准模式下测试通过的，没有测试quirk模式。 clientHeight 大部分浏览器对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，即然是指可看到内容的区域，滚动条不算在内。但要注意padding是算在内。其计算方式为clien...
详解clientHeight、offsetHeight、scrollHeight
tu1425407707的博客
09-27 522
关于clientHeight、offsetHeight、scrollHeight的详解
css基础---使用offsetWidth和offsetHeight获取元素的尺寸
wenmin1987的博客
06-08 5178
获取元素的尺寸（display显示情况 和display：none两种情况 来获取） offsetWidth表示元素在页面中所占用的总宽度 offsetHeight表示元素在页面中所占用的总高度 <div style="width:200px;height:50%;"> <div style="width:50%height:50%;;"> ...
offsetHeight,clientHeight,innerHeight,outerHeight,scrollHeight区别
08-19 628
元素偏移区域 offsetWidth (border + padding+width) offsetHeight (border + padding + height) offsetLeft (元素距离定位父级左内边线的水平距离) offsetTop (元素距离定位父级上内边线的垂直距离) offsetParent (获取元素定位父级，父级加除了position:inherit|initial...
chrome offsetHeight|clientHeight
a5213573的博客
11-24 217
用js获取元素定位，发现chrome下，忽略了元素offsetHeight。其他浏览器可以根据子元素的样式计算出父级的高度，盒模型。而chrome则不可以、得为其元素设置高度，才能再通过js获取到offsetHeight。 firfox: chrome: 设置height由于元素<span>为行内元素，还得添加display:block。 chrome: ...
JS中height、clientHeight、scrollHeight、offsetHeight区别
BelleDiao的博客
07-27 2113
我们来实现test中的onclick事件 function justAtest(){ var test=document.getElementById("test"); var test2=document.getElementById("test2") var test3=document.getElementById("test3") var test4=document.getElementById("test4...
区别clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
跬步
11-25 582
最近在做组件的过程中遇到滚动在切换过程中没有恢复到顶部，于是发现这几个容易混淆的属性。 每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性，单凭单词很难搞清楚分别代表什么意思之间有什么区别。 clientHeight：包括padding但不包括border、水平滚动条、m...
height、clientHeight、scrollHeight、offsetHeight区别
高先生的猫
08-07 1407
先简单瞅瞅他们！贼恐怖！ 搞起来！ div4 div3 div2 div 依次设置height 700px, 550px,600px,500px,1000px 除了test4这个div外,其他的div均有设置border=1px； function justAtest() { var test=document.getElementById("test"); var test2=document.getElementById("test2"); var test...
各种高度的区别及height、clientHeight、scrollHeight、offsetHeight的区分
weixin_30881367的博客
06-24 596
1.height、clientHeight、scrollHeight、offsetHeight 我们来实现test中的onclick事件 function justAtest(){ var test=document.getElementById("test"); var test2=document.getElementById("...
Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页
10-30
仍然需要注意，IE会从Body元素的Left-Border为标准开始计算OffsetLeft，而其他的浏览器将从Left-Margin开始计算。 二、offsetTop属性 offsetTop属性返回一个像素数值，它表示当前元素的上边缘到它的offsetParent...
CheesyFabric_deepdive_analyst_7984_1764666209192.zip
12-03
CheesyFabric_deepdive_analyst_7984_1764666209192.zip
【卫星抗干扰】一种用于全球导航卫星系统反欺骗的空时融合方法【附MATLAB代码】.rar
12-03
1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
遗传算法重新配置配电网络（IEEE 33和69总线系统.zip
最新发布
12-03
1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
windows下定期自动清空某个文件夹（比如在公司电脑上定期清空微信的聊天记录）
12-03
windows下定期自动清空某个文件夹（比如在公司电脑上定期清空微信的聊天记录）
网络爬虫基于Python的豆瓣电影Top250数据采集：使用Requests与BeautifulSoup实现网页内容解析
12-03
内容概要：本文通过一个简单的Python爬虫实例，演示了如何使用requests库发送HTTP请求，获取豆瓣电影Top250页面的数据，并利用BeautifulSoup解析HTML内容，提取出中文电影名称。代码实现了基本的网页抓取与数据清洗流程，包括设置请求头模拟浏览器行为以应对简单反爬机制、解析响应文本以及过滤非中文片名，最终输出纯净的电影标题列表。; 适合人群：具备Python基础语法知识，对网络爬虫感兴趣的初学者或刚入门的数据采集学习者；适合学习Web数据获取的基本流程和技术栈。; 使用场景及目标：①学习如何使用requests发起网络请求并携带请求头信息；②掌握BeautifulSoup进行HTML结构化解析的方法；③理解网页内容提取与数据过滤的基本逻辑，为后续深入学习爬虫框架（如Scrapy）打下基础。; 阅读建议：建议读者在本地环境中配置好相关库（requests、BeautifulSoup），动手运行并调试代码，尝试修改选择器或目标网站以加深理解，同时注意遵守网站的robots协议，合理控制请求频率。
基于粒子群优化算法的p-Hub选址优化（Matlab代码实现）
12-03
内容概要：本文介绍了基于粒子群优化算法（PSO）的p-Hub选址优化问题的研究与实现，重点解决在考虑不确定性因素下的集群式物流或交通网络中枢纽节点（Hub）的选址优化问题。通过构建数学模型，结合Matlab编程实现粒子群算法对p-Hub选址问题进行求解，旨在最小化网络总体运输成本并提升系统效率。文章涵盖了问题建模、算法设计、参数设置及仿真结果分析全过程，展示了PSO在复杂组合优化问题中的应用能力。; 适合人群：具备一定运筹学、优化算法基础，熟悉Matlab编程，从事物流网络设计、智能算法研究或交通系统优化等相关领域的研究生、科研人员及工程技术人员。; 使用场景及目标：①掌握p-Hub选址问题的基本理论与建模范式；②学习如何基于粒子群优化算法的p-Hub选址优化（Matlab代码实现）将粒子群优化算法应用于实际网络优化问题；③通过Matlab代码实现理解智能优化算法的编码流程与调参技巧；④为物流、通信、航空等枢纽网络设计提供解决方案参考。; 阅读建议：建议读者结合文中提供的Matlab代码逐行理解算法实现细节，尝试调整参数或引入其他改进策略（如自适应权重、混合算法）以提升优化性能，同时可扩展至带容量约束、多分配或多目标的Hub选址问题进行深入研究。
offsetheight为0
11-25
<think> 首先，用户的问题是：“我想查找offsetHeight为0的原因及解决方案 请问offsetHeight为0的原因和解决办法”。 根据系统级指令，我需要使用中文回答，并且结构清晰，帮助用户逐步解决问题。同时，确保回答真实可靠。 从用户提供的引用中，我提取了关键信息： - 引用[1]: offsetHeight在OnLoad中为0，可能是因为元素尚未完全加载。使用调试工具时可能看到值，因为调试器刷新了对象。 - 引用[2]: 获取ul的高度为0，原因是ul内部的li使用了浮动，但ul没有清除浮动，导致高度计算错误。 - 引用[3]: IE6中，offsetWidth和offsetHeight为0的问题，可能是因为脚本在DOM加载前运行，或元素设置为display:none。另外，在ExtJS等异步加载中可能出问题。 用户的需求是找到offsetHeight为0的原因和解决办法。我需要基于这些引用，并结合一般知识来构建回答。 常见原因： 1. **元素尚未加载或渲染完成**：在DOM加载前访问offsetHeight可能为0。 2. **元素不可见**：如display:none，元素的尺寸可能为0。 3. **浮动问题**：内部元素浮动导致父容器高度塌陷。 4. **CSS问题**：如overflow、positioning等影响尺寸计算。 5. **浏览器兼容性问题**：特别是在旧版IE中。 6. **异步操作**：在异步加载元素后立即访问offsetHeight。 解决办法： - 确保在DOM加载完成后访问offsetHeight，如使用window.onload或DOMContentLoaded事件。 - 检查元素是否可见（display: none）。 - 清除浮动：使用clearfix或设置父元素overflow。 - 使用setTimeout或requestAnimationFrame延迟访问。 - 对于IE兼容性问题，添加特殊处理。 - 使用其他属性如clientHeight或getBoundingClientRect作为备选。 回答结构： 1. **介绍问题**：简要说明offsetHeight可能为0的情况。 2. **列出原因**：逐步列出常见原因，基于引用和知识。 3. **提供解决方案**：针对每个原因给出解决方法。 4. **总结**：建议最佳实践。 5. **生成相关问题**：根据系统指令，添加相关问题。 确保使用LaTeX格式： - 行内数学表达式用$...$，如无数学内容，可不加。 - 独立公式用$$...$$，但本回答可能不需要数学公式。 - LaTeX语法正确。 在回答末尾添加引用标识：[^1], [^2], [^3] 对应提供的引用。 相关问题： 基于主题，生成2-3个相关问题，如： 1. 如何确保在DOM加载后访问offsetHeight？ 2. 如何处理浮动元素导致的高度问题？ 3. 在IE中offsetHeight为0的解决方法有哪些？ 最终回答用中文。 </think>### offsetHeight 为 0 的原因及解决方案 在 JavaScript 中，`offsetHeight` 用于获取元素的可见高度（包括内容、内边距和边框），但有时会返回 0。这通常是由于元素尚未渲染完成或 CSS 布局问题导致的。以下是常见原因及对应的解决方法，基于实际开发经验和引用资料。我会逐步解释，确保解决方案可靠。 #### 一、offsetHeight 为 0 的常见原因 1. **元素未完全加载或渲染** - 在页面加载过程中（如 `onload` 事件前）访问 `offsetHeight`，元素可能尚未被浏览器渲染完成，导致结果为 0[^1]。 - 示例：脚本在 `<head>` 中运行，而目标元素还在 `<body>` 中解析。 2. **浮动元素导致高度塌陷** - 父元素内部包含浮动子元素（如 `float: left`），但父元素未清除浮动，导致其高度计算为 0[^2]。 - 例如：`ul` 包含浮动的 `li`，但未设置 `overflow` 或 `clearfix`。 3. **元素不可见** - 当元素的 CSS 设置为 `display: none` 时，浏览器不会计算其尺寸，`offsetHeight` 返回 0[^3]。 - 常见于隐藏元素或动态切换显示的组件。 4. **浏览器兼容性问题** - 在旧版 IE（如 IE6）中，异步加载或脚本执行时机不当会导致 `offsetHeight` 为 0，即使元素已存在[^3]。 - 其他因素：如元素未闭合、表格嵌套错误或 `position: absolute` 影响计算。 5. **异步操作未完成** - 在 AJAX、框架（如 React/Vue）或 ExtJS 中，元素可能异步加载。直接访问 `offsetHeight` 时，DOM 更新未完成[^3]。 #### 二、解决方法 针对上述原因，提供以下可靠解决方案： 1. **确保元素渲染完成后再访问** - 使用 `window.onload` 或 `DOMContentLoaded` 事件延迟执行代码： ```javascript document.addEventListener('DOMContentLoaded', () => { const element = document.getElementById('yourElement'); console.log(element.offsetHeight); // 正确获取高度 }); ``` - 对于动态内容，使用 `setTimeout` 或 `requestAnimationFrame` 添加微小延迟： ```javascript setTimeout(() => { console.log(element.offsetHeight); // 延迟后获取 }, 0); ``` 2. **处理浮动元素的高度塌陷** - 为父元素添加 CSS 清除浮动： ```css .parent { overflow: hidden; /* 或 auto */ } ``` - 或使用 clearfix 技巧： ```css .parent::after { content: ""; display: table; clear: both; } ``` - 示例：修复 `ul` 高度为 0 的问题[^2]。 3. **检查元素可见性** - 确认元素未设置 `display: none`。如果需要隐藏但保留尺寸，改用 `visibility: hidden` 或 `opacity: 0`。 - 代码示例： ```javascript if (element.style.display !== 'none') { console.log(element.offsetHeight); } ``` 4. **解决浏览器兼容性问题** - 针对 IE 的特殊处理：检测浏览器并重试获取高度： ```javascript function getOffsetHeight(element) { let height = element.offsetHeight; if (height === 0 && /MSIE \d|Trident/.test(navigator.userAgent)) { // IE 下重试或使用备用方法 height = element.getBoundingClientRect().height; } return height; } ``` - 使用 `getBoundingClientRect()` 作为备选，它更稳定[^3]。 5. **异步场景优化** - 在框架中，利用生命周期钩子（如 Vue 的 `mounted` 或 React 的 `useEffect`）确保 DOM 更新完成。 - 监听元素变化： ```javascript const observer = new MutationObserver(() => { console.log(element.offsetHeight); }); observer.observe(element, { childList: true, subtree: true }); ``` #### 三、最佳实践总结 - **优先在 `DOMContentLoaded` 后访问尺寸属性**，避免渲染问题[^1]。 - **定期检查 CSS 布局**，确保无浮动塌陷或隐藏元素。 - **跨浏览器测试**：使用现代 API 如 `getBoundingClientRect()` 替代 `offsetHeight`。 - 调试技巧：在浏览器开发者工具中，手动检查元素属性，避免调试器刷新导致的误导[^1]。 通过以上方法，您可以有效解决 `offsetHeight` 为 0 的问题。如果问题持续，建议使用工具（如 Chrome DevTools）审查元素布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值