有没有办法使用 JavaScript 确定 css 类是否存在？
如何确定 Javascript 是否存在 css 类？
IT技术
javascript
2021-01-20 00:47:36
6个回答
这应该可以使用document.styleSheets[].rules[].selectorText和document.styleSheets[].imports[].rules[].selectorText属性来完成。请参阅MDN 文档。
function getAllSelectors() {
var ret = [];
for(var i = 0; i < document.styleSheets.length; i++) {
var rules = document.styleSheets[i].rules || document.styleSheets[i].cssRules;
for(var x in rules) {
if(typeof rules[x].selectorText == 'string') ret.push(rules[x].selectorText);
}
}
return ret;
}
function selectorExists(selector) {
var selectors = getAllSelectors();
for(var i = 0; i < selectors.length; i++) {
if(selectors[i] == selector) return true;
}
return false;
}
这是我对此的解决方案。我基本上只是像@helen 建议的那样循环遍历 document.styleSheets[].rules[].selectorText。
/**
* This function searches for the existence of a specified CSS selector in a given stylesheet.
*
* @param (string) styleSheetName - This is the name of the stylesheet you'd like to search
* @param (string) selector - This is the name of the selector you'd like to find
* @return (bool) - Returns true if the selector is found, false if it's not found
* @example - console.log(selectorInStyleSheet ('myStyleSheet.css', '.myClass'));
*/
function selectorInStyleSheet(styleSheetName, selector) {
/*
* Get the index of 'styleSheetName' from the document.styleSheets object
*/
for (var i = 0; i < document.styleSheets.length; i++) {
var thisStyleSheet = document.styleSheets[i].href ? document.styleSheets[i].href.replace(/^.*[\\\/]/, '') : '';
if (thisStyleSheet == styleSheetName) { var idx = i; break; }
}
if (!idx) return false; // We can't find the specified stylesheet
/*
* Check the stylesheet for the specified selector
*/
var styleSheet = document.styleSheets[idx];
var cssRules = styleSheet.rules ? styleSheet.rules : styleSheet.cssRules;
for (var i = 0; i < cssRules.length; ++i) {
if(cssRules[i].selectorText == selector) return true;
}
return false;
}
与其他解决方案相比，此函数提供了速度改进，因为我们只搜索传递给该函数的样式表。其他解决方案遍历所有样式表，这在许多情况下是不必要的。
根据答案，我创建了一个 javascript 函数，用于在浏览器的内存中搜索 CSS 类 -
var searchForCss = function (searchClassName) {
for (let i = 0; i < document.styleSheets.length; i++) {
let styleSheet = document.styleSheets[i];
try {
for (let j = 0; j < styleSheet.cssRules.length; j++) {
let rule = styleSheet.cssRules[j];
// console.log(rule.selectorText)
if (rule.selectorText && rule.selectorText.includes(searchClassName)) {
console.log('found - ', rule.selectorText, ' ', i, '-', j);
}
}
if (styleSheet.imports) {
for (let k = 0; k < styleSheet.imports.length; k++) {
let imp = styleSheet.imports[k];
for (let l = 0; l < imp.cssRules.length; l++) {
let rule = imp.cssRules[l];
if (
rule.selectorText &&
rule.selectorText.includes(searchClassName)
) {
console.log('found - ',rule.selectorText,' ',i,'-',k,'-',l);
}
}
}
}
} catch (err) {}
}
};
searchForCss('my-class-name');
这将在任何样式表的任何规则中为每次出现的类名打印一行。
Ref -在浏览器内存中搜索 CSS 类
/* 您可以遍历当前加载的每个样式表，并为您指定的任何选择器文本返回所有已定义规则的数组，从标签名称到类名称或标识符。
不要包含“#”或“.” id 或类名的前缀。
Safari 过去会跳过禁用的样式表，可能还有其他问题，但在浏览器中阅读规则通常比编写新规则更有效。*/
function getDefinedCss(s){
if(!document.styleSheets) return '';
if(typeof s== 'string') s= RegExp('\\b'+s+'\\b','i'); // IE capitalizes html selectors
var A, S, DS= document.styleSheets, n= DS.length, SA= [];
while(n){
S= DS[--n];
A= (S.rules)? S.rules: S.cssRules;
for(var i= 0, L= A.length; i<L; i++){
tem= A[i].selectorText? [A[i].selectorText, A[i].style.cssText]: [A[i]+''];
if(s.test(tem[0])) SA[SA.length]= tem;
}
}
return SA.join('\n\n');
}
getDefinedCss('p') //如果你愿意，可以替换一个类名或ID
级联中的最新项目首先列出。