Js之操作元素当前的样式类

Element.classList

Element.classList.remove()

Element.classList.add()

业务场景：封装了ant-cascader的组件，增加样式类，修改了默认的样式。现在在其他页面使用封装好的这个组件，为了符合页面色系，需要在该页面去除该样式类，沿用默认的样式。

setup () {
  nextTick(() => {
    /** remove AreaSelect component class ( use default ) */
    const [regionCascader] = document.getElementsByClassName('admin-region');
    regionCascader.classList.remove('admin-region')
  })
}

问题1：去除了‘admin-region’样式类，导致getPopupContainer在该页面，挂载在该类失效，采用 || 弥补。

<template>
  <div class="admin-region">
    <a-cascader
      changeOnSelect
      @change="onChange"
      :value="regionIds"
      :allowClear="false"
      :options="regionsTree"
      expand-trigger="hover"
      :getPopupContainer="getParent"
    />
  </div>
</template>

<script>
export default {
  name: 'AreaSelect',
  methods: {
    getParent() {
      const [dom] = document.getElementsByClassName('admin-region');
      return dom || document.body;
    },
  }
}
</script>

 参考文章：

DOM操作之——元素的增删改、样式修改、插入内容 - 掘金

Element.classList - Web API 接口参考 | MDN

https://www.antdv.com/components/cascader