还原浏览器标签的默认样式

还原浏览器标签的默认样式

• 在使用UI库时，有些原生标签的样式和浏览器默认样式会被修改，并且这种修改无法以新样式覆盖的方式还原默认值。

• 比如将滚动条隐藏掉:

::-webkit-scrollbar {
    display: none;
}

我试过好多种样式修改，都无法还原到默认样式，而最终利用js将这个样式删除掉才得以实现：

[].slice.call(document.styleSheets).forEach(sheet => {
   [].slice.call(sheet.cssRules).forEach((rule,i) => {
       if(rule.selectorText === '::-webkit-scrollbar'){
           sheet.deleteRule(i);
       }
   })
})

实现的原理就是遍历页面所有style样式表， 找到UI库修改默认样式的选择器，这个例子的选择器是::-webkit-scrollbar, 再将其删除。