1. HTML style scoped 属性
今天无意中发现居然还有这么一个神仙属性 HTML style scoped 属性
他的作用主要是将 style
的作用域控制在他自身的父元素之内。
例如:
这个标题是红色的
这个段落是蓝色的。
这个标题是黑色的
这个段落是黑色的。
以上代码中style
中的样式只能作用于第一个div
内的元素。
这样一个功能应用在目前公司老项目中非常nice(asp.net+mvc,导入部分页就不会影响当前页其他元素了)
但是可惜,除了火狐,其他浏览器都不支持!!!
所以我决定自己实现一个
2. 思路
- 判断浏览器是否支持
scoped
, - 找到页面中所有带有
scoped
属性的style
元素,给其父元素添加一个属性 - 修改style中的所有css选择器,加上属性前缀
- 监听dom变化,处理动态创建的
3. 编码
1. 判断浏览器是否支持scoped
if (document.createElement("STYLE").scoped !== undefined) {
return;
}
2. 找到页面中所有带有scoped
属性的style
元素,给其父元素添加一个属性
[...document.getElementsByTagName('style')].forEach(x => updateStyle(x));
/**
* 处理