js监听一个盒子的宽度变化

你可以使用 `ResizeObserver` API 来监听一个盒子的宽度变化。

以下是一个示例代码：

const box = document.querySelector('.box');

const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    const { width } = entry.contentRect;
    console.log(`盒子宽度变为：${width}px`);
  }
});

observer.observe(box);

首先获取到要监听的盒子元素，然后创建一个 `ResizeObserver` 实例。调用 `observe` 方法并传入要监听的元素，当元素的尺寸发生变化时，会触发回调函数。在回调函数里，通过 `contentRect` 属性可以获取元素的新尺寸。

相关问题

vue监听盒子宽度变化

在Vue.js中，如果你想监听元素宽度的变化，可以使用`v-once`指令结合`MutationObserver`或者`ref`配合`@input`事件。以下是两种常见的方法：

1. 使用`MutationObserver`：

<template>
  <div v-ref="myDiv" :style="{ width: myWidth }">
    <!-- 元素内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      myWidth: 'initial-width', // 初始宽度值
    };
  },
  mounted() {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.type === 'attributes') {
          if (mutation.attributeName === 'style' && mutation.target.id === this.$refs.myDiv.id) {
            this.myWidth = mutation.target.style.width;
          }
        }
      });
    });

    // 观察元素width属性的变化
    observer.observe(this.$refs.myDiv, { attributes: true });
  },
  beforeDestroy() {
    observer.disconnect(); // 移除观察者，在组件卸载前停止监听
  },
};
</script>

2. 使用`ref`配合`@input`：

<template>
  <div ref="myDiv" @input="handleWidthChange"></div>
</template>

<script>
export default {
  methods: {
    handleWidthChange() {
      this.myWidth = this.$refs.myDiv.offsetWidth; // 监听宽度变化并更新数据
    },
  },
};
</script>

这两种方法都可以让你在Vue实例中实时地获取到元素宽度的变化。

js点击按钮改变盒子宽度

在JavaScript中，可以通过监听按钮的点击事件，并在事件触发时改变盒子的宽度。具体实现通常包括HTML、CSS和JavaScript三个部分。下面是一个简单的实现步骤：

1. 首先，需要在HTML中定义一个按钮和一个盒子。例如：

<button id="changeWidthBtn">点击改变盒子宽度</button>
<div id="myBox" style="width:100px;height:100px;background-color:#000;"></div>

2. 接着，可以通过CSS来设置盒子的初始样式。

3. 最后，使用JavaScript来添加按钮的点击事件监听器，当按钮被点击时，通过修改盒子的样式来改变其宽度。例如：

document.getElementById('changeWidthBtn').addEventListener('click', function() {
    var box = document.getElementById('myBox');
    // 假设每次点击按钮，盒子宽度增加50像素
    box.style.width = parseInt(box.style.width, 10) + 50 + 'px';
});

在这段JavaScript代码中，我们首先通过`getElementById`获取到了按钮和盒子的DOM元素。然后，为按钮添加了一个点击事件监听器，当按钮被点击时，会执行回调函数。在回调函数内部，我们再次获取到盒子的DOM元素，并通过修改其`style.width`属性来改变盒子的宽度。