剖析神秘的内嵌 css：它的空缺如何实现？
在审查元素时，你可能会发现一些网页中的内嵌 css 样式似乎是空的，即 style 标签内部没有任何可见的样式规则。这引发了一个疑问：这些样式规则是如何应用到网页上的？
以 https://elements.envato.com/sign-in 为例，如果你查看带有 data-styled 属性的 标记，你会发现它内部没有任何内容。然而，页面上的元素确实应用了相关的样式。
幕后解析：.insertrule 的妙用
立即学习“前端免费学习笔记（深入）”；
这种空样式标签的实现依赖于 element.insertrule 方法，该方法允许在样式表中动态插入样式规则。这使得样式引擎可以在不向标记中添加 html 的情况下，将规则应用于 dom 中的元素。
Weights.gg
多功能的AI在线创作与交流平台
3352 查看详情
例如，在上述示例中，名为 document.emotioncache_6_2_0 的一个 javascript 对象使用 .insertrule 方法将样式规则动态插入到 标记中。这种方法避免了将样式标记写入 html dom，同时仍能确保样式应用于目标元素。
探索内嵌 css
要查看这些动态插入的样式规则，可以打开浏览器的开发人员工具，选择带 data-styled 属性的 标签，并在控制台执行以下命令：
console.dir($0.sheet.cssRules)
这将显示应用于页面的所有样式规则列表，即使它们不在 标记中。
以上就是内嵌 CSS 的空标签之谜：样式规则是如何应用的？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1154886.html
微信扫一扫 
支付宝扫一扫 
