小编Ale*_*fen的帖子

大家好 ！

假设我有 2 个辅助类：

.w3-4 {
  width: calc((100% / 4) * 3);
}

// AND

.mr-10 {
  margin-right: 10px;
}

你认为有一种自动的纯CSS方法可以从.mr-10宽度中减去边距值吗.w3-4？

诸如此类的东西

.mr-10 {
  margin-right: 10px;

  // width calc
  width: calc(--width - 10px);
} 

有很多方法可以使用 SASS 甚至 JS 来做到这一点，但我只是有点懒惰和好奇:)

感谢您的回答，

A。

是否有任何原生 JavaScript 函数允许在元素上切换样式（而不是类）？

到目前为止，我正在使用这种脚本：

target.addEventListener('click', (e) => {
    target.classList.toggle('target--is-visible')
}

按风格分：

target {
    visibility: hidden;

    &--is-visible {
        visibility: visible;
    }
}

我很乐意被允许这样做：

target.addEventListener('click', (e) => {
    target.style.toggle.visibility = 'visible'
}

编辑

三元运算符是我在可读性方面最接近的。

@GuyWhoKnowsStuff 发送的函数使用三元运算符，值得共享：

const div = document.querySelector('div');

function toggleStyle(el, prop, style1, style2) {
  el.style[prop] = el.style[prop] === style1 ? style2 : style1;
}

div.addEventListener('click', e => {
  toggleStyle(div, 'background', 'red', 'blue');
});

感谢您的回答！