js移除div里面内容(引入外部css文件的方式)

js移除div里面内容(引入外部css文件的方式)

出品 | code秘密花园(ID:code_mmhy)

刚刚发布的 Chrome 93 版本中更新了一项令人兴奋的新特性:CSS Module Script,使用它你可以像导入一个JavaScript模块一样加载CSS样式。

然后,你可以将 CSS 样式与可构造样式表(Constructable Stylesheet) 相同的方式作用于document和shadow dom,这比其他加载 CSS 的方式更方便、更高效。

什么是可构造样式表?

在了解CSS Module Script之前,我们先来了解下啥是可构造样式表(Constructable Stylesheet)。和表面意思一样,它是为了CssStyleSheet可直接构造而设计的,在document和shadow dom下都可以使用。

使用可构造样式表:

通过new CSSStyleSheet()构造一个样式表改变可构造样式表通过adoptedStyleSheets使用可构造样式表

改变可构造样式表有如下API:

insertRule(rule,index)往cssRules属性里插入ruledeleteRule(rule,index)从cssRules属性里删除rulereplace(text)异步替换cssRulesreplaceSync(text)同步的replace//ConstructtheCSSStyleSheetconststylesheet=newCSSStyleSheet();//AddsomeCSSstylesheet.replaceSync(‘body{background:#000!important;}’)//ORstylesheet.replace,whichreturnsaPromiseinstead//Tellthedocumenttoadoptyournewstylesheet.//NotethatthisalsoworkswithShadowRoots.document.adoptedStyleSheets=[…document.adoptedStyleSheets,stylesheet];使用 CSS Module Script

引入CSS Module Script将作用于document和shadow dom,如下:

importsheetfrom’./styles.css’assert{type:’css’};document.adoptedStyleSheets=[sheet];shadowRoot.adoptedStyleSheets=[sheet];

CSS Module Script默认导出的是一个可构造样式表,与任何其他可构造样式表一样,它使用adoptedstylesheet作用于document和shadow dom。

和其他使用JavaScript引入CSS的方式不同,你无需创建一个<script>标签,也不需要把CSS插入混淆后的JavaScript中。

CSS Module也有像JavaScript Module一样的优点:

重复数据删除:如果从应用的多个位置导入相同的 CSS 文件,它仍然只会被提取、实例化和解析一次。一致的顺序:如果导入一个JavaScript运行时,它可以依赖于已经解析过的样式表。安全性:模块使用CORS加载,并且使用严格的MIME类型检查。导入断言(assert)是什么?

import语句的assert {type: ‘css’}部分是一个import断言,这是必需要声明的的;如果没有它,CSS 将被认为是一个普通的JavaScript模块,如果导入的文件具有非JavaScript MIME类型,则会导入失败。

importsheetfrom’./styles.css’;//Failedtoloadmodulescript://ExpectedaJavaScriptmodule//scriptbuttheserverresponded//withaMIMEtypeof”text/css”.样式表的动态导入

类似于JavaScript模块的动态导入,你还可以用dynamic import导入 CSS 模块:

constcssModule=awaitimport(‘./style.css’,{assert:{type:’css’}});document.adoptedStyleSheets=[cssModule.default];

这里有个坑需要注意,被添加到adoptedstylesheet的并不是cssModule本身,而是cssModule.default。

@import 的规则尚未支持

目前,CSS@import的规则不适用于可构造样式表,包括CSS Module Script。如果 CSS 模块中含有@import规则,则这些规则将被忽略。

/*atImported.css*/div{background-color:blue;}/*styles.css*/@importurl(‘./atImported.css’);/*IgnoredinCSSmodule*/div{border:1emsolidgreen;}<!–index.html–><scripttype=”module”>importstylesfrom’./styles.css’assert{type:”css”};document.adoptedStyleSheets=[styles];</script><div>Thisdivwillhaveagreenborderbutnobackgroundcolor.</div>

目前Firefox和Safari浏览器尚未支持,不过未来可期~

推荐阅读:

使用ArcGisJS实现地图管理

让你 nodejs 水平暴增的 debugger 技巧

我用两行代码实现了一个数据库!

计算机优秀书籍每周销售排行榜

动图演示 | 青蛙跳跳,斐波那契

每日打卡赢积分兑换书籍入口

发表评论

登录后才能评论