如何在DOM中隐藏css rule content
站长
· 阅读数 71
问题描述
最近在学 emotion 的时候，发现一个奇怪的现象，emotion 中的 css 内容在 Chrome Inspect Element 中具体找不到！
但是这个 css 确实是存在，于是想弄清楚这个问题是为什么
复现路径
$ npm install
$ npm run build
# build 之后，在 dist 目录使用 http-server 开启服务
$ http-server
问题搜索
这个问题之前自己完全没有遇到过，于是就以：
如何在 DOM 中隐藏 css 内容
这里只在 stackoverflow 找到了一个描述类似的，但是没有发现相关答案： react-emotion's CSS not present in DOM
排查过程
网上查资料无望，此时就只能从 emotion 的源码入手了
观察页面我们发现 emotion 注入的是一个这样的 style 标签
<style
data-emotion="css"
data-s=""
></style>
emotion code tag: v10.0.0
于是，已 data-emotion 为关键词在 emotion 代码中搜索
发现这个 style 标签是这样注入到页面中的：
以 createStyleElement 为线索，发现这个 style 标签执行这样的操作：
文件相对位置：/emotion/packages/sheet/src/index.js
然后去 MDN 查询 CSSStyleSheet.insertRule() 资料
终于破案，通过 CSSStyleSheet.insertRule() 可以向页面中插入 css 规则，且插入的规则不会在 Chrome Inspect Element 展示
复现 demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
http-equiv="X-UA-Compatible"
content="IE=edge"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Document</title>
<style></style>
</head>
<body>
<h1>hello world!</h1>
<button>clime me inset css</button>
<script>
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
const style = document.querySelector('style');
const sheet = style.sheet;
sheet.insertRule('h1 { color: blue; }');
});
</script>
</body>
</html>
运行结果：
结论
终于破案，通过 CSSStyleSheet.insertRule() 可以向页面中插入 css 规则，且插入的规则不会在 Chrome Inspect Element 展示
参考链接
转载自:https://juejin.cn/post/7284464014447886390