Question

有没有办法用纯JavaScript操作CSS类？

我正在创建一个下拉菜单，我希望在height: 0时将其从height: auto转换为元素的计算高度。

默认情况下，我尝试操作的CSS类没有元素。

<小时/> 的 HTML：

<ul class="dropdown-parent">
  <li><a>Link</a></li>
  <li>
    <a>Link</a>
    <ul class="dropdown">
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
    </ul>
  </li>
</ul>

CSS：

.dropdown-parent {
    position: relative;
}

.dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    height: 0;
    overflow: hidden;
    transition: height 1s ease-in-out;
}

.expand {}

JavaScript的：

const dropdown = document.querySelector('.dropdown-parent');
const dropdownList = document.querySelector('.dropdown');

dropdownList.style.height = 'auto';
const dropdownHeight = dropdownList.offsetHeight;
dropdownList.style.height = '0';

dropdown.addEventListener('click', () => {
    -- TRYING TO ADD CALCULATED HEIGHT TO THE CLASS '.expand' --

    dropdown.classList.toggle('expand');
});

我想：

1）获取DOM中的元素。

2）将元素的高度设置为自动。

3）计算它的高度并将其存储在变量中。

4）将其高度设置为0。

5）将计算出的高度添加到班级.expand。

6）向父级添加一个事件监听器以切换类.expand。

我唯一不能做的就是第（5）步。

有关此主题的一些帮助？

Answer 1

您可以使用CSS custom properties更改值本身来解决此问题。

CSS：

:root {
  --expanded-height: auto;
}

.expand {
  height: var(--expanded-height);
}

使用Javascript：

dropdown.addEventListener('click', () => {
    document.documentElement.style.setProperty('--expanded-height', dropdownHeight);
    dropdown.classList.toggle('expand');
});

来源：CSS Custom Properties—Dynamic Changes With And Without Javascript

使用vanilla JavaScript处理CSS类

1 个答案: