js获取高度

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 += " 网页被卷去的高:"+ document.body.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 +" 像素/英寸";

### JavaScript 获取元素高度并使用 `calc` 进行计算 #### 获取元素的高度 在JavaScript中,可以通过多种方式来获取元素的高度。一种常用的方式是通过`getBoundingClientRect()`方法,该方法返回一个对象,其中包含了元素的位置及其尺寸信息。 ```javascript var element = document.getElementById('exampleElement'); var rect = element.getBoundingClientRect(); console.log(rect.height); ``` 此代码片段展示了如何获得具有特定ID的元素的高度[^1]。 另一种方法是使用`offsetHeight`属性,它提供了元素自身的可视高度(包括内边距padding但是不包括外边距margin),这同样是一个简单而有效的方式来取得元素的高度。 ```javascript var element = document.getElementById('exampleElement'); console.log(element.offsetHeight); ``` 对于更精确控制样式的情况,则可以采用`window.getComputedStyle()`配合访问具体的CSS属性值如`height`等。 #### 使用 `calc` 函数进行动态计算 为了使页面布局更加灵活,在设置元素大小时经常需要用到基于百分比或者其他相对单位的计算表达式。HTML中的`<style>`标签内部可以直接应用带有`calc()`函数定义样式的规则;而在JavaScript里也可以动态改变这些样式属性,并且允许嵌入变量或执行简单的数学运算。 下面的例子说明了怎样利用JavaScript修改某个DIV容器的高度为视窗宽度减去固定像素数: ```html <div id="dynamicHeight"></div> <script> var div = document.getElementById('dynamicHeight'); div.style.width = '100%'; div.style.height = 'calc(100vh - 50px)'; </script> ``` 这段脚本会把指定id的选择器对应的元素宽设为整个浏览器窗口宽度(`100vw`),高则设定为其90%,再减掉额外给定的一个绝对长度值 (`50px`).
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值