使用原生 JavaScript 操作 CSS 类答案

【问题标题】：Manipulate CSS classes with vanilla JavaScript使用原生 JavaScript 操作 CSS 类
【发布时间】：2018-05-12 09:26:55
【问题描述】：

有没有办法用纯 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）步。

关于这个主题的一些帮助？

【问题讨论】：

如果没有 a) 修改 .css 样式表或 b) 添加另一个

标签： javascript css drop-down-menu dom-manipulation

【解决方案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

【讨论】：

【解决方案2】：

您可以在 DOM 中创建新元素 style 并声明 .expand {} 类

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

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

let sheet = document.createElement('style');
document.body.appendChild(sheet);

dropdown.addEventListener('click', () => {
    sheet.innerHTML = ".expand {height: " + dropdownHeight + "px;}";
    dropdown.classList.toggle('expand');
});

即使存在预定义类.expand，此语句也只会追加或重新定义类.expand 的属性height。根据上下文，您应该避免重复创建元素 sheet。

【讨论】：