获取元素的宽度,高度

1. style.width 适合行内样式

style.   : 这种方式不适合取值,适合给元素设置样式

<div style="width:100px;"></div>

2. window.getComputedStyle(elem).width Chrome, FF, IE9+支持此方法(现代浏览器)

3. elem.clientWidth 可视宽度 padding+元素宽度,对于行内元素,元素的宽度获取不了,此属性也不起作用

    获取网页的高度:document.documentElement.clientHeight

                           注意: document.documentElement是html,文档元素

获取文档的宽高:
var w=document.documentElement.clientWidth;  document.body.clientWidth这种写法是不对的
var h=document.documentElement.clientHeight;

        css中 用:root表示html选择器,假如body设置了背景色红色,html不设置,那么此红色会填充整个网页,如果再给:root设置了蓝色的背景色,那么蓝色填充整个网页,红色只填充到有网页元素的部分

     

4. elem.offsetWidth 占位宽,可视宽度+border

The HTMLElement.offsetHeight read-only property is the height of the element including vertical padding and borders, as an integer.

Typically, an element's offsetHeight is a measurement in pixels of the element's CSS height, including border, padding and the element's horizontal scrollbar (if present, if rendered). It does not include the height of pseudo-elements such as :before or :after.

对于行内元素可以用此属性,但是获取的值在各浏览器中不一致,解决办法是,首先把行内元素转化为块元素,然后设置其宽高,再用clientWidth和offsetWidth

<span id="span1">spanspanspanspanspanspanspanspan</span>
#span1{
    display: block;
    width: 300px;
}
5. scrollWidth 元素的内容的实际尺寸,尤其是内容溢出时,不同浏览器scrollWidth还不一样


另外,如果元素设置了box-sizing,还必须考虑box-sizing的值

① 如果设置了box-sizing: content-box;

#div1 {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 10px solid #000;
    box-sizing: content-box;
}

那么样式中的width100px就是内容宽,此时clientWidth=100+10+10,offsetWidth=100+10+10+10+10

② 如果设置了box-sizing: border-box;

#div1 {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 10px solid #000;
    box-sizing: content-box;
}

那么样式中的width100px就是包含了border的宽度,所以100px=border+padding+内容宽,计算内容宽=60

这时clientWidth=60+10+10,offsetWidth=60+10+10+10+10



### 如何在 UniApp 中获取元素宽度 在 UniApp 开发中,可以通过 `uni.createSelectorQuery()` 方法来实现对页面上的某个 DOM 节点进行查询操作。以下是具体的实现方式以及代码示例: #### 使用 `uni.createSelectorQuery` 查询节点信息 通过调用 `uni.createSelectorQuery().select('.类名')` 可以选中目标节点,并使用 `.boundingClientRect(callback)` 来获取该节点的相关尺寸数据(如宽度高度等)。最终执行 `.exec()` 完成异步查询。 下面是完整的代码示例: ```javascript // 获取屏幕和元素高度宽度 uni.getSystemInfo({ success: function (res) { // 屏幕宽高等基础信息存储于 res 参数中 const screenWidth = res.screenWidth; // 屏幕宽度 console.log('Screen Width:', screenWidth); // 创建选择器查询对象并定位指定类名的元素 const query = uni.createSelectorQuery(); query.select('.target-class').boundingClientRect(data => { if (data) { console.log("Element Data:", data); console.log("Element Width:", data.width); // 输出元素宽度 console.log("Element Height:", data.height); // 输出元素高度 } }).exec(); }, fail: function (err) { console.error('Failed to get system info', err); } }); ``` 上述代码实现了两个功能:一是通过 `uni.getSystemInfo` 获取设备的基础信息;二是利用 `createSelectorQuery` 和 `boundingClientRect` 获取特定 DOM 节点的具体属性[^1]。 #### 关键点解析 - **`uni.createSelectorQuery`**: 返回一个 SelectorQuery 对象实例,在此实例上调用方法可完成节点的选择与测量工作[^3]。 - **`.select('.class-name')`**: 用于选取具有指定 CSS 类名的单个节点。 - **`.boundingClientRect(callback)`**: 提供回调函数接收所选节点的布局位置及其大小的数据结构,其中包含 `width`, `height`, `top`, `left` 等字段。 需要注意的是,这些 API 的行为类似于微信小程序中的同名接口,因此开发过程中应遵循其文档说明以避免兼容性问题[^2]。 --- ### 注意事项 当处理动态生成的内容或者需要等待某些动画完成后才去读取尺寸时,请确保将以上逻辑放置在合适的生命周期钩子内(比如 Vue 组件中的 `mounted` 阶段),从而保障 DOM 已经渲染完毕再发起请求[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值