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

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

  • 在使用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, 再将其删除。


版权声明:本文为iVRJay原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。