还原浏览器标签的默认样式
-
在使用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
, 再将其删除。