js原生修改元素的class，获取元素的坐标，动态添加删除style标签

onMounted(() => {
  const handleSetTooltipStyle = () => {
    let body = document.getElementById('m-body')
    let rect = body.getBoundingClientRect()
    body.className = `m-body ${import.meta.env.MODE === 'development' ? 'prod' : 'prod'}`

    console.log('rect', rect)

    let styleId = 'm-tooltip'
    let styleElement = document.getElementById(styleId)
    if (styleElement) {
      styleElement.parentNode.removeChild(styleElement)
    }

    let style = document.createElement('style')

    style.type = 'text/css'
    style.id = 'm-tooltip'

    style.innerHTML = `
      .m-body.dev .gc-spread-toolTip {
      transform: translate(-100px, -100px)!important;

      }
      .m-body.prod .gc-spread-toolTip {
      transform: translate(-${rect.left}px, -${rect.top}px)!important;
      }
      `
    document.body.appendChild(style)
  }

  handleSetTooltipStyle()

  window.$wujie?.bus.$on('msg', function (payload) {
    console.log(payload)
    if (payload.type === 'showMenu') {
      handleSetTooltipStyle()
    }
  })
})

人工智能学习网站

https://chat.xutongbao.top