幫助中心
這里有最新的使用文檔和教程
【JS 】讓瀏覽器支持<style scoped>
1. HTML style scoped 屬性
今天無意中發現居然還有這么一個神仙屬性 HTML style scoped 屬性
他的作用主要是將 style的作用域控制在他自身的父元素之內。
例如：
<div>
<style type="text/css" scoped>
h1 {color:red;}
p {color:blue;}
</style>
<h1>這個標題是紅色的</h1>
<p>這個段落是藍色的。</p>
</div>
<h1>這個標題是黑色的</h1>
<p>這個段落是黑色的。</p>
以上代碼中style中的樣式只能作用于第一個div內的元素。
這樣一個功能應用在目前公司老項目中非常nice（asp.net+mvc，導入部分頁就不會影響當前頁其他元素了）
但是可惜，除了火狐，其他瀏覽器都不支持！！！
所以我決定自己實現一個
2. 思路
- 判斷瀏覽器是否支持
scoped， - 找到頁面中所有帶有
scoped屬性的style元素，給其父元素添加一個屬性 - 修改style中的所有css選擇器，加上屬性前綴
- 監聽dom變化，處理動態創建的<style scoped>
3. 編碼
1. 判斷瀏覽器是否支持scoped
if (document.createElement("STYLE").scoped !== undefined) {
return;
}
2. 找到頁面中所有帶有scoped屬性的style元素，給其父元素添加一個屬性
[...document.getElementsByTagName('style')].forEach(x => updateStyle(x));
/**
* 處理 <style> 標簽
* @param style dom
*/
function updateStyle(style) {
if (!style
|| style.parentElement == null
|| style.parentElement == document.head
|| style.parentElement == document.body
|| !style.hasAttribute("scoped")
|| style.scoped === true) {
return;
}
style.scoped = true; // 防止重復處理
const scope = ("_" + (Math.random() * 100000000).toString("36")).replace('.', '');
style.parentElement.setAttribute(scope, '');
// 處理css
}
3. 修改style中的所有css選擇器，加上屬性前綴
/**
* 為選擇器添加范圍前綴scope
* @param {String} selector css選擇器
* @param {String} scope css范圍前綴
* @returns 返回修改后的css選擇器
*/
function updateSelector(selector, scope) {
return selector.split(",").map(x => x.replace(/((?<=^\s*)\s|^)([\S])/, "$1" + scope + " $2")).join(",");
}
/**
* 將css代碼中所有選擇器都加上范圍前綴scope
* @param {String} css css代碼
* @param {String} scope css范圍前綴
* @returns 返回修改后的css代碼
*/
function updateCss(css, scope) {
// css = css.replace(/[\n\r\s]+/g, " "); // 去掉多余的空格和回車
css = css.replace(/("[^"]*")|('[^']*')/g, x => x.charAt(0) + encodeURIComponent(x.slice(1, -1)) + x.charAt(0)); // 去字符串干擾
css = css.replace(/[^{}]+{/g, x => updateSelector(x, scope));
css = css.replace(/("[^"]*")|('[^']*')/g, x => x.charAt(0) + decodeURIComponent(x.slice(1, -1)) + x.charAt(0)); // 還原字符串
return css;
}
用正則處理還是會有一些問題的，不過勝在代碼簡潔，實際使用中只要注意避開就好了，比如下面這段css就會有問題
@keyframes show {
100% {
opacity: 1;
}
}
4. 監聽dom變化，處理動態創建的<style scoped>
// 當觀察到變動時執行的回調函數
const callback = function (mutationsList) {
if (mutationsList.length == 0) {
return;
}
for (const mutation of mutationsList) {
for (const node of mutation.addedNodes) {
if (node.nodeName === "STYLE") {
updateStyle(node);
}
}
}
};
// 創建一個觀察器實例并傳入回調函數
const observer = new MutationObserver(callback);
const config = { childList: true, subtree: true };
observer.observe(document, config);
// MutationObserver 是異步的，回調時間不可控，所以需要設置一個輪詢
setInterval(() => callback(observer.takeRecords()), 100);
5. 完整代碼
// style scoped
(() => {
// 檢測原生 style是否支持 scoped
if (document.createElement("STYLE").scoped !== undefined) {
return;
}
document.createElement("STYLE").__proto__.scoped = false;
/**
* 為選擇器添加范圍前綴scope
* @param {String} selector css選擇器
* @param {String} scope css范圍前綴
* @returns 返回修改后的css選擇器
*/
function updateSelector(selector, scope) {
return selector.split(",").map(x => x.replace(/((?<=^\s*)\s|^)([\S])/, "$1" + scope + " $2")).join(",");
}
/**
* 將css代碼中所有選擇器都加上范圍前綴scope
* @param {String} css css代碼
* @param {String} scope css范圍前綴
* @returns 返回修改后的css代碼
*/
function updateCss(css, scope) {
// css = css.replace(/[\n\r\s]+/g, " "); // 去掉多余的空格和回車
css = css.replace(/("[^"]*")|('[^']*')/g, x => x.charAt(0) + encodeURIComponent(x.slice(1, -1)) + x.charAt(0)); // 去字符串干擾
css = css.replace(/[^{}]+{/g, x => updateSelector(x, scope));
css = css.replace(/("[^"]*")|('[^']*')/g, x => x.charAt(0) + decodeURIComponent(x.slice(1, -1)) + x.charAt(0)); // 還原字符串
return css;
}
/**
* 處理 <style> 標簽
* @param style dom
*/
function updateStyle(style) {
if (!style
|| style.parentElement == null
|| style.parentElement == document.head
|| style.parentElement == document.body
|| !style.hasAttribute("scoped")
|| style.scoped === true) {
return;
}
style.scoped = true; // 防止重復處理
const scope = ("_" + (Math.random() * 100000000).toString("36")).replace(& - 上一篇：微信小程序多種跳轉頁面方式
- 下一篇：Windows 2008 如何安裝IIS？