当前位置:Gxlcms > PHP教程 > 使用JavaScript创建新样式表和新样式规则,javascript样式表_PHP教程

使用JavaScript创建新样式表和新样式规则,javascript样式表_PHP教程

时间:2021-07-01 10:21:17 帮助过:10人阅读

使用JavaScript创建新样式表和新样式规则,javascript样式表


如今的这个年代,流行在Web页面上使用了大量的JavaScript,我们需要寻找各种方式来优化它们,使它们更快。我们使用事件委托来让事件监听器更有效率,使用降频技术来限定某些方法的使用次数,使用各种JavaScript加载器来动态加载我们需要的资源,等等。另外一种让页面更高效、更敏捷的方法是动态的添加或移除样式表里的样式,而不需要去查询DOM元素,对每个元素做样式调整。下面我们就来看看如何使用这种技术!

捕获样式表

你的页面上可能引用了不只一个的样式文件,你可以选择其中的一个。如果你指定了某个,你可以在HTML页面中的LINK 和 STYLE标签上加入ID来进行区别,获取CSSStyleSheet对象,它存放在document.styleSheets对象里。

var sheets = document.styleSheets; // 返回一个StyleSheetList数组

/*
返回: 

StyleSheetList {0: CSSStyleSheet, 1: CSSStyleSheet, 2: CSSStyleSheet, 3: CSSStyleSheet, 4: CSSStyleSheet, 5: CSSStyleSheet, 6: CSSStyleSheet, 7: CSSStyleSheet, 8: CSSStyleSheet, 9: CSSStyleSheet, 10: CSSStyleSheet, 11: CSSStyleSheet, 12: CSSStyleSheet, 13: CSSStyleSheet, 14: CSSStyleSheet, 15: CSSStyleSheet, length: 16, item: function}
*/

// 找到你想要修改的样式表
var sheet = document.styleSheets[0];

一个重要的需要注意的事情是样式表的media属性——如果你不小心,当想往屏幕显示使用的样式表里做修改操作时,你也许会错误的修改了用于打印(print)时使用的样式表。CSSStyleSheet对象里有各种属性信息,需要时你可以从中获取。

// Get info about the first stylesheet
console.log(document.styleSheets[0]);

/*
返回结果: 

CSSStyleSheet
 cssRules: CSSRuleList
 disabled: false
 href: "http://davidwalsh.name/somesheet.css"
 media: MediaList
 ownerNode: link
 ownerRule: null
 parentStyleSheet: null
 rules: CSSRuleList
 title: null
 type: "text/css"
*/

// Get the media type
console.log(document.styleSheets[0].media.mediaText)
/*
Returns:
 "all" or "print" or whichever media is used for this stylesheet
*/

有很多方法都可以让你捕获一个样式表,往里面添加新样式规则。

创建一个新的样式表

大多数时候,最好的方法是创建一个新的STYLE元素,动态的往里面添加规则。非常简单:

var sheet = (function() {
 // Create the