vue中获取dom高度

devtools/2024/10/19 2:19:00/

vue中获取dom高度

  • 在 Vue 中获取 DOM 元素的高度可以通过以下几种方式:
  • 1、通过ref来获取节点,通过offsetHeight来获取节点的高度
  • 2、通过js获取节点,本次演示的是document.querySelectorAll
  • 3、获取到节点的高度动态赋值

offsetHeight 属性可以获取元素的高度(包括元素的边框、内边距和内容区域)

在 Vue 中获取 DOM 元素的高度可以通过以下几种方式:

1、通过ref来获取节点,通过offsetHeight来获取节点的高度

javascript"><div ref="title">Hello, world!</div>
let height = this.$refs.title.offsetHeight;

注意:如果你获取的是多个节点,一定要记住通过下标来获取高度

javascript"><div ref="title">Hello, world!</div>
<div ref="title">Hello, world!</div>
let height = this.$refs.title[0].offsetHeight;

2、通过js获取节点,本次演示的是document.querySelectorAll

javascript"><div class="title">Hello, world!</div>
<div class="title">Hello, world!</div>
let height = document.querySelectorAll('title')[0].offsetHeight;

3、获取到节点的高度动态赋值

javascript">//获取到节点之后动态赋值给节点的样式
this.$refs.title[0].style.maxHeight = height+"px"

http://www.ppmy.cn/devtools/43671.html

相关文章

[9] CUDA性能测量与错误处理

CUDA性能测量与错误处理 讨论如何通过CUDA事件来测量它的性能如何通过CUDA代码进行调试 1.测量CUDA程序的性能 1.1 CUDA事件 CPU端的计时器可能无法给出正确的内核执行时间CUDA事件等于是在你的CUDA应用运行的特定时刻被记录的时间戳&#xff0c;通过使用CUDA事件API&#…

大模型面试--大模型(LLMs)基础面

大模型&#xff08;LLMs&#xff09;基础面 1. 目前主流的开源模型体系有哪些&#xff1f; 目前主流的开源大模型体系有以下几种&#xff1a; 1. Transformer 系列 Transformer 模型是深度学习中的一类重要模型&#xff0c;尤其在自然语言处理&#xff08;NLP&#xff09;领…

WebSocket

WebSocket 一、简介1.HTTP协议和WebSocket协议对比2.思考&#xff08;1&#xff09;WebSocket缺点&#xff08;2&#xff09;WebSocket应用场景 二、入门案例1.案例分析2.代码开发3.功能测试 三、参考 一、简介 WebSocket是基于TCP的一种新的网络协议。它实现了浏览器与服务器…

【设计模式】JAVA Design Patterns——Circuit Breaker(断路器模式)

&#x1f50d;目的 以这样一种方式处理昂贵的远程服务调用&#xff0c;即单个服务/组件的故障不会导致整个应用程序宕机&#xff0c;我们可以尽快重新连接到服务 &#x1f50d;解释 真实世界例子 想象一个 Web 应用程序&#xff0c;它同时具有用于获取数据的本地文件/图像和远程…

Java 18 新特性详解:提升开发效率与性能

Java 18 新特性详解 Java 18 是 Oracle 于 2022 年发布的最新版本,带来了许多新的特性和改进。本文将深入探讨 Java 18 的主要新特性及其应用场景,帮助开发者更好地理解和利用这些新功能。 1. 简单的 Web 服务器 Java 18 引入了一个简单的 HTTP 文件服务器,旨在为开发和测…

基于jeecgboot-vue3的Flowable增加表单功能(二)

因为这个项目license问题无法开源&#xff0c;更多技术支持与服务请加入我的知识星球。 接上一节 6、增加一个types.ts 类型 export interface FormForm {id: number | string | undefined;formName: string;formContent?: string;remark: string; } 7、api增加一个getForm…

如何解决链游中可能出现的延迟或网络拥堵问题?

随着区块链技术的不断发展和普及&#xff0c;链游&#xff08;基于区块链的游戏&#xff09;作为新兴的娱乐形式&#xff0c;正逐渐走进大众的视野。然而&#xff0c;与传统游戏相比&#xff0c;链游在运行过程中可能会遇到一些特有的问题&#xff0c;其中最为突出的就是延迟和…

智慧城市运维可视化:透视未来城市高效管理的新视窗

行业痛点 现代城市运维是一个复杂而庞大的系统&#xff0c;涉及到诸多方面&#xff0c;包括交通、环境、能源等等。然而&#xff0c;在城市运维中&#xff0c;存在着一些现实的痛点&#xff0c;给城市管理者带来了不小的压力和困扰&#xff1a; 1、交通拥堵 随着城市化进程的…