js获取div的高度获取到小数位

在 JavaScript 中获取元素的高度可以使用 `offsetHeight` 或 `clientHeight` 属性，这些属性返回的都是整数值，表示像素数。如果需要获取小数位，可以使用 `getComputedStyle` 方法获取元素的样式，然后获取其高度值。例如：

HTML 代码：

<div id="myDiv">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, placeat.
</div>

JavaScript 代码：

var myDiv = document.getElementById("myDiv");
var heightStr = window.getComputedStyle(myDiv).getPropertyValue("height");
var heightNum = parseFloat(heightStr);
console.log(heightNum);

在上面的代码中，我们首先获取了 `myDiv` 元素，然后使用 `getComputedStyle` 方法获取其样式对象，再使用 `getPropertyValue` 方法获取高度属性值。由于获取到的高度值带有单位（例如 "100px"），我们使用 `parseFloat` 函数将其转换为浮点数类型，最后打印出来。

相关问题

js获取div的高度变化

在JavaScript中，你可以通过监听DOM元素的高度变化事件（例如`resize`事件）来获取div高度的变化。以下是一个基本的例子：

// 获取初始div高度
var initialHeight = document.getElementById('yourDivId').offsetHeight;

// 监听div的resize事件
document.getElementById('yourDivId').addEventListener('resize', function() {
  // 当高度发生变化时，获取新的高度
  var newHeight = this.offsetHeight;
  
  // 检查是否有变化并处理
  if (newHeight !== initialHeight) {
    console.log('Div height changed from ' + initialHeight + ' to ' + newHeight);
    // 这里可以进一步操作，比如更新UI、发送网络请求等
  }
  
  // 更新初始高度
  initialHeight = newHeight;
});

在这个例子中，你需要将`yourDivId`替换为你实际要观察的div元素的ID。

vue3获取div高度

在Vue 3中，你可以使用ref或者计算属性来动态获取`<div>`元素的高度。这里有两个例子：

**使用ref:**

<template>
  <div ref="myDiv">Hello</div>
</template>

<script>
export default {
  setup() {
    const myDivRef = ref(null);
    onMounted(() => {
      if (myDivRef.value !== null) {
        const height = myDivRef.value.offsetHeight; // 获取高度
        console.log(height);
      }
    });
    return { myDivRef };
  },
};
</script>

这里`ref`创建了一个响应式的变量`myDivRef`，然后在组件挂载后检查元素是否已加载并获取其高度。

**使用计算属性:**

<template>
  <div :style="{ height: computedHeight }"></div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const element = ref(null);

    const computedHeight = computed(() => {
      return element.value ? element.value.offsetHeight : null;
    });

    return {
      element,
      computedHeight,
    };
  },
};
</script>

在这个例子中，我们监听元素的变化，并通过计算属性`computedHeight`获取其实际高度。当元素存在时，显示其高度，否则为`null`。