[英]How to get CSS class by name from StyleSheet?
I have the following code which uses the index to get stylesheet and also css class inside that stylesheet. 我有以下代码,该代码使用索引获取样式表以及该样式表内的CSS类。
for (var s = document.styleSheets.length - 1; s >= 0; s--) {
if (document.styleSheets[s].href && (document.styleSheets[s].href.indexOf("MySheet.css")!=-1)) {
var cssRules = document.styleSheets[s].cssRules ||
document.styleSheets[s].rules || []; // IE support
for (var c = 0; c < cssRules.length; c++) {
if (cssRules[c].selectorText === ".myclass ")
cssRules[c].style.backgroundColor = 'powderblue';
}
}
}
Though I get CSS class by its name in the above code I need to avoid this looping.Is it possible to get CSS class by querying it??How to do this??else some other way to avoid this looping?? 虽然我在上面的代码中按名称获得了CSS类,但我还是需要避免这种循环。是否有可能通过查询获取CSS类?如何做到这一点?其他避免这种循环的方法?
Here's a snippet you can use to create new rules and manipulate existing rules in a stylesheet. 这是一个片段,您可以用来创建新规则和操作样式表中的现有规则。 A particular sheet is recognized by its
title
, so you need to give unique titles to those stylesheets you want to manipulate (add title
attribute to corresponding link
or style
tags). 特定的工作表可以通过其
title
识别,因此您需要为要处理的样式表赋予唯一的标题(将title
属性添加到相应的link
或style
标签)。
function CssManipulator (sheetTitle) {
var that = this, // A reference to an instance
len = document.styleSheets.length, // Caches the length of the collection
n; // General loop counter
this.styleSheet = null; // Stores the stylesheet for the instance
this.selectors = {}; // Stores the selectors we've handled
this.cssRules = null; // Caches cssRules of the given stylesheet
// Search the given stylesheet by title and assign it and its cssRules to instance properties
for (n = 0; n < len; n++) {
if (document.styleSheets[n].title === sheetTitle) {
this.styleSheet = document.styleSheets[n];
this.cssRules = document.styleSheets[n].cssRules || document.styleSheets[n].rules;
break;
}
}
// Changes properties of the given selector
this.change = function (selector, prop, value) {
// FF knows only camel-cased propertynames, hence camel-casing the propName
var propName = (prop.charAt(0) === '-') ? prop.substring(1, prop.length) : prop;
propName = propName.replace(/-([a-z])/gi, function(str, chr) {
return chr.toUpperCase();
});
if (selector in that.selectors) { // Change the rule, if we've handled this selector before
that.styleSheet.cssRules[that.selectors[selector]].style[propName] = value;
} else { // Add a new rule if we haven't met this selector before
that.selectors[selector] = that.styleSheet.insertRule(selector + '{' + prop + ':' + value + ';}', that.cssRules.length);
}
};
}
selectors
contains the magic, it stores the index of the newly-created rule returned by insertRule
. selectors
包含魔术,它存储insertRule
返回的新创建规则的insertRule
。
Usage 用法
Create an instance of CssManipulator
for every stylesheet you want to change like this: 为要更改的每个样式表创建一个
CssManipulator
实例,如下所示:
pageSheet = new CssManipulator('title_of_the_stylesheet');
Then you can manipulate most of the rules in a stylesheet (pseudo-elements can't be manipulated with this code) by calling object's change
method: 然后,您可以通过调用对象的
change
方法来处理样式表中的大多数规则(伪代码无法使用此代码进行处理):
pageSheet.change('.some_selector', 'property-name', 'value_for_the_property');
This method adds a new selector once, nevertheless if the passed selector exists in the original stylesheet or not. 即使所传递的选择器是否存在于原始样式表中,此方法也会一次添加一个新的选择器。 Notice, that if you change a property name like
background-color
, you need to pass "hyphen-mode" of the property name to the method. 请注意,如果您更改属性名称(例如
background-color
,则需要将属性名称的“连字符模式”传递给方法。
You can develope the object further, for example change
method could be easily changed to accept more than one property-value pair per call. 您可以进一步开发对象,例如,
change
方法可以轻松更改为每个调用接受多个属性-值对。
If I understands correctly, you want to change CSS. 如果我理解正确,则想更改CSS。 Precisely you want to change CSS rules for a class.
正是您想更改类的CSS规则。 To do so, and to be the most performance efficient, I would create a stylesheet with your selectors, it might be just
.selector>div{}
for example or just .selector{}
. 为此,为了使性能最有效,我将使用选择器创建一个样式表,例如,可能只是
.selector>div{}
或只是.selector{}
。
<style type="text/css">.squerify>tr{height:60px;}</style>
I used this a while ago to make my table cells square (while my cells was all equal). 我前一段时间使用它来使表格单元格方形(而我的单元格都相等)。
Then I used this code to change parameters of the class in the stylesheet. 然后,我使用此代码来更改样式表中类的参数。
document.styleSheets[0].cssRules[numberOfSelector].style.height=document.querySelector('.squerify td').offsetWidht+"px";
This was the best way I could think of, but if you want, you could use a loop to search for the classes. 这是我能想到的最好方法,但是如果需要,可以使用循环来搜索类。
Send a comment if misunderstood your question. 如果误解了您的问题,请发送评论。
var someVar = document.querySelectorAll('.someClass');
for(var i=0; i<someVar.length; i++){
someVar[i].style.background = 'powderBlue';}
This will grab all of the elements with the class 'someClass' and change the background color. 这将使用“ someClass”类获取所有元素,并更改背景颜色。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.