js - querySelector 在伪类 ::before 中选择和编辑样式答案

【问题标题】：js - querySelector pick and edit styles in pseudoclass ::beforejs - querySelector 在伪类 ::before 中选择和编辑样式
【发布时间】：2018-09-17 12:41:41
【问题描述】：

我想用 querySelector 方法获得一个带有伪类 ::before 的元素，我如何在 vanilla Js 中做到这一点？这是我的尝试：

const menuDropdown = document.querySelectorAll('[class$="menu-dropdown"');
const about = document.querySelector('#about');

about.addEventListener('mouseover', function () {

    for(let el of menuDropdown) {
        console.log(el);
        el.style.opacity = '1';
        el.style.visibility = 'visible';
    }

})

.menu-dropdown:before {
    content: '';
    position: absolute;
    background-color: black;
    display: block;
    top: -15px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    height: 30px;
    width: 30px;
    opacity: 0;
    visibility: hidden;
}

<div id="about">
  <ul class="menu-dropdown">
      <li><a href="#">Aktualności</a></li>
      <li><a href="#">Nasz team</a></li>
      <li><a href="#">Historia</a></li>
  </ul>
</div>

【问题讨论】：

How to get pseudo element?的可能重复
简单，添加一个类，为什么要应用内联样式？
而不是什么？我不知道在哪里

标签： javascript html css

【解决方案1】：

我已经修改了代码以显示鼠标所在元素的伪元素的不透明度。

const menuDropdown = document.querySelector('.menu-dropdown');
const about = document.querySelector('#about');

about.addEventListener('mouseover', function () {
  menuDropdown.classList.add('make-visible');
});
about.addEventListener('mouseout', function () {
 menuDropdown.classList.remove('make-visible');
});

.menu-dropdown:before {
    content: '';
    position: absolute;
    background-color: black;
    display: block;
    top: -15px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    height: 30px;
    width: 30px;
    opacity: 0;
    visibility: hidden;
}

.make-visible:before {
  opacity: 1;
  visibility: visible;
}

<div id="about">
  <ul class="menu-dropdown">
      <li><a href="#">Aktualności</a></li>
      <li><a href="#">Nasz team</a></li>
      <li><a href="#">Historia</a></li>
  </ul>
</div>

【讨论】：

是的，我可以显示不透明度值，但是如何更改它？？我需要在元素之前将不透明度从 0 更改为 1，你可以编辑它吗？
抱歉，误解了您的问题。我不认为你可以通过 JS 来操纵伪元素的样式。但是，您可以为更改伪元素不透明度的元素分配一个类。
啊好的...我明白了，谢谢你的回答！
更新了答案，向您展示如何添加/删除类。

【解决方案2】：

试试这个getComputedStyle(document.querySelector('.menu-dropdown'), ':before')

【讨论】：

未捕获的类型错误：无法在 HTMLLIElement 处设置未定义的属性“不透明度”。