如何使用JS或Vue.js 2获取并显示<span>或<div>的长度？

在Vue.js 2中，你可以通过ref属性便捷获取DOM元素并计算其宽度，以下是具体实现方案：

实现步骤 #

1. 给目标添加ref标识，方便Vue实例获取该DOM元素
2. 在Vue实例的mounted钩子（DOM渲染完成后执行）中，获取元素的宽度值
3. 将宽度值绑定到数据属性，在页面上展示

完整代码示例 #

<template>
  <div>
    <span ref="targetSpan">Hello World!</span>
    <p>上方span标签的宽度：{{ spanWidth }}px</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      spanWidth: 0
    }
  },
  mounted() {
    // DOM渲染完成后获取元素宽度
    const spanElement = this.$refs.targetSpan
    if (spanElement) {
      // 取元素的实际渲染宽度（包括内边距，不含边框和外边距）
      this.spanWidth = spanElement.offsetWidth
      // 若需要内容宽度（不含内边距），可使用 spanElement.clientWidth
      // 若需要包含边框的宽度，使用 spanElement.scrollWidth
    }
  }
}
</script>

注意事项 #

• 如果的内容是异步加载的（比如从接口获取），需要在数据更新后通过this.$nextTick()延迟获取宽度，确保DOM已更新：

// 假设异步获取内容后
this.content = '异步加载的长文本'
this.$nextTick(() => {
  this.spanWidth = this.$refs.targetSpan.offsetWidth
})

• 是行内元素，默认宽度由内容撑开，如果需要固定宽度或块级展示，可通过CSS设置display: inline-block或display: block

原生JS实现方案（非Vue特用） #

如果需要用原生JS实现，给添加id后即可获取：

<span id="targetSpan">Hello World!</span>
<p id="widthDisplay"></p>

<script>
window.onload = function() {
  const spanElement = document.getElementById('targetSpan')
  const widthDisplay = document.getElementById('widthDisplay')
  if (spanElement && widthDisplay) {
    widthDisplay.innerHTML = `上方span标签的宽度：${spanElement.offsetWidth}px`
  }
}
</script>

内容的提问来源于stack exchange，提问作者Visal Yogaraj