记录一次JS设置样式遇到的大坑

记录一下使用js修改某元素display属性时遇到的坑，多多沉淀，防止遗忘。

前提

项目中某个模块是使用原生js实现的，其中某个按钮需要在用户操作后切换显隐状态。伪代码如下：

const el = document.querySelector('button.btn');
const show = () => {
  el.style.display = 'block';
};
const hide = () => {
  el.style.display = 'none';
};

遇大坑

某天在访问这个页面时，突然发现调用show方法后按钮无法显示，查询提交记录后发现同事给了个默认样式，并且是写在单独的css文件中的。伪代码如下：

button {
  &.btn {
    display: none !important;
  }
}

经过友好协商，同事那改不了，所以只能改自己的代码了。于是乎想当然将show方法更改如下：

const show = () => {
  el.style.display = 'block !important';
};

这么简单的代码，改完之后偷懒没有测试就直接提交了。

但是！部署以后发现，这段代码并没有生效！！！但是debugger的时候，这行代码确实是执行了！！！

原因

经过查询，原来是因为element.style对应的是元素的内联样式，无法直接附加!important标识，强行设置block !important是浏览器会将整个字符串作为display的值进行校验，判定为非法CSS值，导致样式不生效。

解决方案

使用setProperty方法。伪代码如下：

const show = () => {
  el.style.setProperty('display', 'block', 'important');
};

MDN文档地址

CSSStyleDeclaration.setProperty()