JavaScript实现动态创建CSS样式规则方案

前端技术 2023/09/06 JavaScript

现在Web应用中有大量的JavaScript代码,而我们也一直在追寻各种使他们更快的解决方案。

1.我们通过 事件代理(event delegation) 让事件监听更高效,
2.我们利用 函数降频技术(function debouncing) 来限制一段时间内给定方法被调用的次数,请参考:如何防止事件函数的高频触发(中文翻译)
3.我们使用 JavaScript加载器 来加载我们确实需要的那部分资源,等等。

还有一种方式,可以让我们的页面更加的快速和高效.那就是直接通过JS动态地添加和删除样式表中的某些样式,用来取代不断地查询DOM元素,并应用各种样式。下面是它的工作原理。

获取样式表

你可以选择任意的样式表来添加样式规则。如果你有确定的样式表,则可以在HTML页面中给 <link> 或 <style> 标签添加ID属性,然后直接通过这个DOM元素的 sheet 属性就可以取得 CSSStyleSheet 对象。样式表也可以通过 document.styleSheets 遍历到:

http://davidwalsh.name/somesheet.css\"
    media: MediaList[对象]
    ownerNode: link[对象]
    ownerRule: null
    parentStyleSheet: null
    rules: CSSRuleList[对象]
    title: null
    type: \"text/css\"
*/

// 获取媒体类型(media type)
console.log(document.styleSheets[0].media.mediaText)
/*
返回值可能是:
    \"all\" 或者 \"print\" 或者是其他应用到此样式表的 media
*/

本文地址：https://www.stayed.cn/item/15333

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案