js监听页面高度
时间: 2023-08-22 13:04:24 浏览: 68
要监听页面高度,可以使用 JavaScript 中的 `window` 对象,使用 `addEventListener` 方法来监听 `resize` 事件并在事件回调函数中更新页面高度。
以下是一个示例代码:
```js
window.addEventListener('resize', function() {
var height = window.innerHeight;
console.log('页面高度为:', height);
});
```
在上面的代码中,我们监听了窗口的 `resize` 事件,当窗口大小发生变化时会触发该事件。在事件回调函数中,我们使用 `window.innerHeight` 获取当前页面的高度,并将其打印到控制台上。
相关问题
js监听div高度
要监听一个 `div` 元素的高度,可以使用 JavaScript 中的 `MutationObserver` 对象来监视该元素的变化。
以下是一个示例代码:
```js
var targetNode = document.getElementById('myDiv');
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
var height = targetNode.offsetHeight;
console.log('div的高度为:', height);
}
});
});
observer.observe(targetNode, { attributes: true });
```
在上面的代码中,我们首先获取了一个 `id` 为 `myDiv` 的 `div` 元素,并将其赋值给了 `targetNode` 变量。
然后,我们创建了一个 `MutationObserver` 对象,并在其回调函数中监视了 `targetNode` 元素的样式属性变化。当样式属性发生变化时,我们获取了 `targetNode` 元素的高度,并将其打印到控制台上。
最后,我们通过调用 `observer.observe` 方法来启动 `MutationObserver` 对象的监听。这里我们设置了 `attributes` 选项为 `true`,表示我们要监视目标元素的属性变化。
vue 监听 class 高度
Vue 监听 class 高度的一种常见方法是使用 `v-bind` 指令和计算属性。具体步骤如下:
1. 在需要监听高度变化的元素上绑定一个 class,例如 `my-class`。
2. 使用 `v-bind` 指令将这个 class 绑定到一个计算属性上,例如 `myHeight`。
3. 在计算属性中返回这个元素的高度,可以使用 JavaScript 中的 `offsetHeight` 属性获取。
4. 当这个元素的高度发生变化时,计算属性会重新计算并更新视图。
代码示例如下:
```
<template>
<div class="my-class" :class="{ 'my-class-height': myHeight }">
<!-- 元素内容 -->
</div>
</template>
<script>
export default {
data() {
return {
// 其他数据
};
},
computed: {
myHeight() {
return document.querySelector('.my-class').offsetHeight;
},
},
};
</script>
```
在上述示例中,当 `.my-class` 元素的高度发生变化时,`myHeight` 计算属性会重新计算并更新视图。同时,我们还可以通过绑定另一个 class(例如 `my-class-height`)来实现高度变化后的样式更新。注意,在计算属性中访问 DOM 元素时应该避免使用 jQuery 等框架,而是使用原生的 JavaScript 方法。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)