vue3通过点击事件获取body并添加样式

可以使用以下代码实现：

const handleClick = () => {
  const body = document.querySelector('body');
  body.style.backgroundColor = 'red';
}

// 在模板中添加点击事件
<template>
  <button @click="handleClick">点击我</button>
</template>

这段代码使用了 `querySelector` 方法获取了 `body` 元素，并通过修改 `style` 属性来改变背景颜色。在模板中添加了一个点击事件，当按钮被点击时，会触发 `handleClick` 函数。

相关问题

vue3t通过点击事件获取body并动态给body添加样式

可以使用以下代码实现：

<template>
  <div>
    <button @click="addStyleToBody">Add Style to Body</button>
  </div>
</template>

<script>
export default {
  methods: {
    addStyleToBody() {
      const body = document.querySelector('body');
      body.style.backgroundColor = 'red';
      body.style.color = 'white';
    }
  }
}
</script>

这段代码使用了 `querySelector` 方法获取了 `body` 元素，并使用 `style` 属性动态添加了背景色和文字颜色样式。

vue3t通过点击事件获取body并动态给body添加删除样式

可以使用以下代码实现：

<template>
  <div>
    <button @click="toggleBodyClass">Toggle Body Class</button>
  </div>
</template>

<script>
export default {
  methods: {
    toggleBodyClass() {
      document.body.classList.toggle('dark-mode');
    }
  }
}
</script>

<style>
.dark-mode {
  background-color: #333;
  color: #fff;
}
</style>

这段代码会在点击按钮时给 `body` 添加或删除 `dark-mode` 样式，从而实现动态切换页面主题。