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` 样式，从而实现动态切换页面主题。

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

可以使用以下代码实现：

document.body.addEventListener('click', () => {
  document.body.style.backgroundColor = 'red';
});

这段代码会在点击页面时将背景色改为红色。