js 获取高度

最新推荐文章于 2023-08-01 10:37:09 发布
最新推荐文章于 2023-08-01 10:37:09 发布
阅读量61 收藏
点赞数
文章标签： xhtml javascript ViewUI

<script>
function getInfo()
{
var s = "";
s += " 网页可见区域宽："+ document.body.clientWidth;
s += " 网页可见区域高："+ document.body.clientHeight;
s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)";
s += " 网页正文全文宽："+ document.body.scrollWidth;
s += " 网页正文全文高："+ document.body.scrollHeight;
s += " 网页被卷去的高(ff)："+ document.body.scrollTop;
s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop;
s += " 网页被卷去的左："+ document.body.scrollLeft;
s += " 网页正文部分上："+ window.screenTop;
s += " 网页正文部分左："+ window.screenLeft;
s += " 屏幕分辨率的高："+ window.screen.height;
s += " 屏幕分辨率的宽："+ window.screen.width;
s += " 屏幕可用工作区高度："+ window.screen.availHeight;
s += " 屏幕可用工作区宽度："+ window.screen.availWidth;
s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
//alert (s);
}
getInfo();
</script>
在我本地测试当中：
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得，很简单，很方便。
而在公司项目当中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在页面中添加这行标记的话

在IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
?
在Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
而如果没有定义W3C的标准，则
IE为：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
Opera为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

================================================================================

以下是IE新开页面屏幕计算默认值：
FF与IE都支持(计算有差异)网页可见区域宽【document.body.clientWidth】：1239
FF与IE都支持(计算有差异)网页可见区域高【document.body.clientHeight】：0
FF与IE都支持(计算有差异)网页可见区域宽【document.body.offsetWidth】：1239
FF与IE都支持(计算有差异)网页可见区域高【document.body.offsetHeight】：0
FF与IE都支持(计算有差异)网页正文全文宽【document.body.scrollWidth】：1239
FF与IE都支持(计算有差异)网页正文全文高【document.body.scrollHeight】：0
FF与IE都支持(计算相同)网页被卷去的高【document.body.scrollTop】：0
FF与IE都支持(计算相同)网页被卷去的宽【document.body.scrollLeft】：0
只支持IE:网页正文部分上【window.screenTop】：144
只支持IE：网页正文部分左【window.screenLeft】：0
FF与IE都支持(计算相同)：屏幕分辨率的高【window.screen.height】：1024
FF与IE都支持(计算相同)：屏幕分辨率的宽【window.screen.width】：1280
FF与IE都支持(计算相同)：屏幕可用工作区高度【window.screen.availHeight】：990
FF与IE都支持(计算相同)：屏幕可用工作区宽度【window.screen.availWidth】：1280
FF与IE都支持(计算有差异)：窗体左【document.body.offsetLeft】与右【document.body.offsetTop】：10和15
FF与IE都支持(计算有差异)：窗体高【document.body.offsetWidth】与宽【document.body.offsetHeight】：1239和0
垂直方向滚动的值【document.documentElement.scrollTop】:0
只支持FF浏览器整个宽高，不包括工具条【window.innerHeight】：undefined
FF与IE都支持(计算有差异)网页内容可视区域的高度【document.documentElement.clientHeight】:820
FF与IE都支持(计算相同)：获取位于对象最顶端和窗口中可见内容的最顶端之间的距离【document.documentElement.scrollTop】:0

==================================================================

第一个：
for(var i=1;i<50;i++)
{
document.getElementById("TextBox1").scrollTop++;
document.getElementById("TextBox1").scrollLeft++;
}
我刚开始的时候写成了
for(int i=1;i<50;i++)
{
//document.getElementById("TextBox1").scrollTop++;
document.getElementById("TextBox1").scrollLeft++;
}
IE提示错误，Exception ;我半天不知道怎么回事，最后才发现是犯了个很低级的错误，javascript中的
变量用var定义，可以不定义！
下面入正题
clientHeight
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看
到内容的这个区域的高度。

offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于
clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。
scrollHeight 则是网页内容实际高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

说了半天还是给个图吧

那么当容器如div中的table的宽大与定义的div的宽的时候，这个时候ScrollLeft++是可以起作用的！

=========================================================



wapysun
关注
获取给定一段文字的长度和高度
liuhao9999的博客
05-17 699
function getTextWidthAndHeight(str) { var span = document.createElement("span"); span.innerHTML = str; span.style.fontSize = "12px"; span.style.lineHeight = "1em"; span.style.padding = "0px"; span.style.mar..
js获取高度
11-12
js获取高度
js获取文本高度和屏幕高度
weixin_42260706的博客
12-04 4986
网页可见区域宽： document.body.clientWidth  网页可见区域高： document.body.clientHeight  网页可见区域宽： document.body.offsetWidth (包括边线的宽)  网页可见区域高： document.body.offsetHeight (包括边线的高)  网页正文全文宽： document.body.scrollWidth  ...
JS计算字符串在浏览器的宽度和高度
yuge486的博客
02-25 2078
JS计算字符串在浏览器的宽度和高度
JS 获取元素的大小（高度和宽度）
shou_ren_bai_bu的博客
08-01 1077
offsetHeight = border-top-width（上边框的宽度） + 内上边距 + 高度 + 内下边距 + border-buttom-width（下边框的宽度）clientHeight = 内上边距 + 高度 + border-button-width（下边框的宽度）scrollHright = 内上边距 + 包含内容的完全高度 + 内下边距。中，使用下面3组属性可以获取元素的高度和宽度。
js获取Html元素的实际宽度高度的方法
10-22
下面小编就为大家带来一篇js获取Html元素的实际宽度高度的方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS获取一个未知DIV高度的方法
10-21
本文将详细解析如何使用JavaScript来动态获取未知DIV的高度，并讨论在实现过程中可能会遇到的浏览器兼容性问题以及相应的解决方案。 首先，我们要了解JavaScript中与元素尺寸相关的几个主要属性：clientHeight、...
js获取网页高度(详细整理)
10-27
本篇文章将详细介绍如何使用JavaScript获取网页的可见区域高度、屏幕分辨率的高度、屏幕可用工作区高度以及浏览器窗口的高度。 首先，我们来看一下网页可见区域的高度和宽度。这部分是指用户当前可以看到的页面区域...
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
10-21
在本文中，我们将深入探讨如何使用JavaScript获取浏览器高度、窗口高度、元素尺寸以及元素的偏移属性。这些都是前端开发中常见的需求，理解并掌握这些方法对于优化用户体验至关重要。 首先，我们来看如何获取浏览器...
JS测量文字的宽度px和高度px
qq_34452824的博客
05-07 5117
如果单纯测量文字宽度px，比较常用的方法是使用canvas的context.measureText： function measureUseCanvas(fontSize, fontFamily, text) { var canvas = document.createElement("canvas"); var context = canvas.getContext(...
clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
weixin_38170862的博客
09-19 276
网页可见区域高：document.body.clientHeight 网页正文全文高：document.body.scrollHeight网页可见区域高（包括边线的高）：document.body.offsetHeight网页被卷去的高：document.body.scrollTop 屏幕分辨率高：window.screen.height clientHeight：包括paddin...
JS获取元素的高度
zuo_zuo_blog的博客
11-16 8515
1.offsetHeight var div = document.getElementById('demo'); console.log(div.offsetHeight); // 244 注意这里返回的值不带有单位 offsetHeight的值包括元素内容+内边距+边框 offsetHeight = content + padding + border = 200 + 20 * 2 + 2 * 2 = 244 2、clientHeight var div = document.getElementBy
Js/Jquery获取网页屏幕可见区域高度（转）
a4636666的博客
03-27 413
原文地址：https://www.cnblogs.com/whb17bcdq/p/6513766.html document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 ...
js获取文本的宽度高度
weixin_47813845的博客
12-09 2366
直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
Js获取字符串的显示宽度/高度
张营的技术博客
11-09 2万+
重点: 1.在H5页面，文字大小单位为rem 2.不同的font-family，文字的宽度不一样 3.文字宽度同时受font-size和font-family影响思路： 在页面动态创建一个节点，设置节点的font-size,font-family,还有内容，然后获取它的宽度。节点宽度必须随内容变化而变化，所以使用display:inline-block 为了避免禅城误差，使用 getComp
JS获取真正字符串的长度
凭澜偏偏
07-19 1107
由于汉字和ascii码中的128个字符字节不同 汉字占两个字节。所以要想获取汉字的真正长度可以通过如下函数： function getStrLength(str) { //1、定义计数器 var len=0,code=0; //2、遍历该字符串 for(var i=0;i<str.length;i++) ...
JS 计算任意字符串宽度
热门推荐
11-09 2万+
注意是宽度不是长度！ 由于像素和字体大小，字节（特别是UTF-8）等限制因素，使得想要知道一个字符串所占的实际宽度并不是那么容易。 下面提供一种比较方便实用的方法： 用个visibility:hidden的浮动的层来计算字符串宽度。 在添加的div容器里把样式设置为和你实际的div一样。 <!DOCTYPE html> <html> <hea...
JS获取字符串实际长度(包含汉字)
Eddie-Wang的博客
05-09 1710
oracle中的汉字占3个字节，因此前台传值到后台前，需要做一下校验，判断用户的输入长度，避免超过oracle中定义的长度，前台计算字符串长度的方式如下： var jmz = {}; jmz.GetLength = function(str) { ///<summary>获得字符串实际长度，中文2，英文1</summary> ///<param n...
js获取元素、div的实际高度宽度
weixin_43954090的博客
04-22 1528
我们看到jquery是这么写的 get: function( elem, computed, extra ) { if ( computed ) { return rdisplayswap.test( jQuery.css( elem, "display" ) ) && ( !elem.getClientRects().length || !elem.g...
js通过class获取高度
最新发布
07-06
<think>我们被要求使用JavaScript通过类名获取元素的高度。由于类名可能对应多个元素，因此我们需要获取所有匹配该类的元素，并分别获取它们的高度。 根据引用[1]，我们可以使用`document.getElementsByClassName(className)`来获取具有指定类名的元素集合。注意，这个方法返回的是一个HTMLCollection（动态集合），我们可以通过索引访问每个元素，然后获取每个元素的高度。 获取元素的高度有多种方式，常用的有： 1. `element.offsetHeight`：包括元素的边框、内边距和内容区域的高度，但不包括外边距。 2. `element.clientHeight`：包括内边距和内容区域的高度，但不包括边框、外边距和滚动条。 3. 使用`window.getComputedStyle(element)`（引用[4]提到）来获取元素的计算样式，然后读取其高度值（字符串，需要转换为数字）。这种方法可以获取包括由CSS设置的高度，但注意它返回的可能是带单位（如px）的字符串。 注意：如果元素的高度是由CSS设置的，并且我们想要获取精确的计算值（包括可能为百分比、auto等转换后的像素值），那么使用`getComputedStyle`是合适的。 但是，由于问题中没有明确说明元素的高度是内联样式还是CSS样式，我们可以选择使用`offsetHeight`或`clientHeight`来获取布局高度（以像素为单位的整数），或者使用`getComputedStyle`来获取CSS计算的高度值（字符串形式，可能为"auto"或"100px"等）。 我们通常需要的是元素在页面上占据的实际高度（布局高度），所以`offsetHeight`更常用。 步骤： 1. 使用`document.getElementsByClassName`获取元素集合。 2. 遍历集合中的每个元素。 3. 对每个元素，使用`offsetHeight`（或根据需求选择其他属性）来获取高度。 4. 如果集合为空，则没有匹配的元素。 注意：如果元素是隐藏的（display:none），那么其offsetHeight为0，因为它在页面上不占据空间。 示例代码： ```javascript // 假设类名为'my-class' var elements = document.getElementsByClassName('my-class'); // 遍历元素 for (var i = 0; i < elements.length; i++) { var element = elements[i]; var height = element.offsetHeight; // 获取元素的高度（包括边框和内边距，但不包括外边距） console.log('Element ' + i + ' height: ' + height + 'px'); } ``` 如果我们需要获取包含外边距的高度？那么需要加上外边距。但注意，元素的外边距并不属于元素本身的高度，而是它与其他元素之间的间距。通常，我们获取元素自身的高度就是offsetHeight。 另外，如果元素的高度是由CSS的transform缩放等操作改变的，offsetHeight仍然返回原始高度，而不是视觉上缩放后的高度。这种情况下，可能需要使用getBoundingClientRect()来获取元素的视觉尺寸（包括缩放、旋转等变换后的尺寸）。 但是，问题只要求高度，且没有特殊说明，我们使用offsetHeight即可。 如果用户希望获取的是通过CSS设置的高度（可能是字符串形式，如'100px'或'50%'），那么我们可以使用： ```javascript var style = window.getComputedStyle(element); var height = style.getPropertyValue('height'); // 例如返回"100px" ``` 然后，我们可以将字符串转换为数字（使用parseFloat）以去掉单位。 因此，根据用户的具体需求，我们可以提供两种方式。 但是，问题描述是“获取元素的高度”，通常我们指的是元素在页面上呈现的像素高度（整数），所以推荐使用offsetHeight。 如果用户需要的是内容高度（不包括内边距和边框），则使用clientHeight。 总结： 根据需求选择： - 实际渲染高度（包括内边距和边框，不包括外边距）：offsetHeight - 内容高度（包括内边距，不包括边框和滚动条）：clientHeight - 精确的CSS计算高度（字符串，可能为auto）：使用getComputedStyle 我们这里假设用户需要的是元素在布局中的实际高度（offsetHeight），因为这是最常见的需求。 因此，最终代码： ```javascript // 通过类名获取所有元素 var elements = document.getElementsByClassName('your-class-name'); for (var i = 0; i < elements.length; i++) { var height = elements[i].offsetHeight; // 处理高度，例如打印或存储 } ``` 注意：如果页面中有多个相同类名的元素，我们将获取每个元素的高度。 如果用户只想获取第一个匹配元素的高度，那么： ```javascript var element = document.getElementsByClassName('your-class-name')[0]; if (element) { var height = element.offsetHeight; } ``` 最后，注意引用[4]中提到，如果元素是隐藏的（display:none），那么它的布局高度为0。如果用户需要获取隐藏元素的高度，我们可以先将其显示（但可能会影响页面布局），或者使用其他技巧（例如将其临时设为可见，获取高度后再隐藏）。但这个问题比较复杂，通常不推荐，因为会触发重排。 因此，我们只获取当前可见元素的高度。 根据以上分析，我们给出答案。</think>### 使用 JavaScript 通过类名获取元素高度 要通过类名获取元素的高度，可以结合 `getElementsByClassName()` 和 `offsetHeight` 属性实现，具体步骤如下： #### 方法步骤 1. **获取元素集合** 使用 `document.getElementsByClassName()` 获取所有匹配类名的元素（返回类数组对象）。 ```javascript const elements = document.getElementsByClassName('your-class-name'); ``` 2. **获取高度值** 遍历元素集合，通过 `offsetHeight` 获取元素的实际高度（包括内容 + 内边距 + 边框，单位：像素）： ```javascript // 获取第一个匹配元素的高度 if (elements.length > 0) { const height = elements[0].offsetHeight; console.log('元素高度:', height + 'px'); } ``` 3. **获取所有匹配元素的高度** ```javascript Array.from(elements).forEach((element, index) => { console.log(`元素${index + 1}高度:`, element.offsetHeight + 'px'); }); ``` #### 完整示例 ```html <style> .box { width: 200px; padding: 20px; border: 5px solid #333; margin: 10px; } </style> <div class="box">元素1</div> <div class="box">元素2</div> <script> // 获取所有类名为 "box" 的元素 const boxes = document.getElementsByClassName('box'); // 输出每个元素的高度 Array.from(boxes).forEach((box, i) => { const height = box.offsetHeight; console.log(`元素${i + 1}高度: ${height}px`); // 示例输出：元素1高度: 90px（内容30px+内边距40px+边框10px） }); </script> ``` #### 关键属性说明 - **`offsetHeight`** 返回元素的可见高度（内容 + 内边距 + 边框 + 水平滚动条，**不包含外边距**）[^1]。 - **`clientHeight`** 仅返回内容 + 内边距的高度（**不包含边框和滚动条**）。 - **`getComputedStyle()`** 如需获取 CSS 设置的精确高度值（如 `height: 100px`），可使用： ```javascript const style = window.getComputedStyle(element); const height = style.getPropertyValue('height'); // 返回 "100px" ``` #### 注意事项 1. **元素隐藏时高度为 0** 若元素被 `display: none` 隐藏，`offsetHeight` 将返回 `0`。 2. **动态内容需等待渲染** 若元素内容动态加载，需在 `window.onload` 或 DOM 更新后获取高度： ```javascript window.addEventListener('load', () => { const height = document.getElementsByClassName('box')[0].offsetHeight; }); ``` --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值