你如何确定一个CSS类是否存在与Javascript？
有没有一种方法来确定是否存在使用JavaScript的CSS类？
这应该可以做到使用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; }
/ *您可以遍历当前加载的每个样式表，并从标签名称到类名称或标识符返回指定的所有select器文本的所有已定义规则的数组。
不要包含“＃”或“。” 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'） //如果你喜欢，可以replace一个类名或者id
级联中的最新项目列在第一位 。
这是我的解决scheme。 我本质上只是循环通过document.styleSheets []。rules []。selectorText作为@helenbuild议。
/** * 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; }
这个函数提供了比其他解决scheme更快的速度，因为我们只search传递给函数的样式表。 其他解决scheme遍历所有样式表，这在许多情况下是不必要的。
您可以检查并查看您正在查找的样式的对象是否已经存在。 如果这样做，那么CSS类必须存在，因为一个对象正在使用它。 例如，如果你想确保明确命名的svg对象有自己的风格：
function getClassName(name) { //Are there any elements which use a style named 'name' ? if (document.getElementsByClassName(name).length === 0){ //There are none yest, let's make a new style and add it var style = document.createElement('style'); style.type = 'text/css'; //Where you might provide your own hash function or rnd color style.innerHTML = '.'+name+' { fill: #' + getHashColor(name) + '; background: #F495A3; }'; //Add the style to the document document.getElementsByTagName('head')[0].appendChild(style); } return name; }
请注意，如果您正在查找文档中不一定使用的样式，这不是一个好方法。
基于海伦的回答，我提出了这个问题：
//************************************************************************** //** hasStyleRule //************************************************************************** /** Returns true if there is a style rule defined for a given selector. * @param selector CSS selector (eg ".deleteIcon", "h2", "#mid") */ var hasStyleRule = function(selector) { var hasRule = function(selector, rules){ if (!rules) return false; for (var i=0; i<rules.length; i++) { var rule = rules[i]; if (rule.selectorText){ var arr = rule.selectorText.split(','); for (var j=0; j<arr.length; j++){ if (arr[j].indexOf(selector) !== -1){ var txt = trim(arr[j]); if (txt===selector){ return true; } else{ var colIdx = txt.indexOf(":"); if (colIdx !== -1){ txt = trim(txt.substring(0, colIdx)); if (txt===selector){ return true; } } } } } } } return false; }; var trim = function(str){ return str.replace(/^\s*/, "").replace(/\s*$/, ""); }; for (var i=0; i<document.styleSheets.length; i++){ var rules = document.styleSheets[i].rules || document.styleSheets[i].cssRules; if (hasRule(selector, rules)){ return true; } var imports = document.styleSheets[i].imports; if (imports){ for (var j=0; j<imports.length; j++){ rules = imports[j].rules || imports[j].cssRules; if (hasRule(selector, rules)) return true; } } } return false; };
在上面添加这个条件
if (!document.getElementsByClassName('className').length){ //class not there } else{ //class there }
如果想检查一个元素只要使用
element.hasClassName( className );
你也可以使用一个ID
document.getElementById("myDIV").classList.contains('className');
祝你好运 ！！！
