Question

这是我的代码，

<!DOCTYPE html>
<html>
<head>
<style>
.class1 {
  color:red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>

我需要检查class1是否在jquery中使用或附加了style标签？怎么可能..

Answer 1

我猜您想要找到样式标签中是否提供样式。只需获取所有样式标签 - 并查看该类是否在标签内

var found_class = false;
$('style').each(function() {
   if ($(this).html().indexOf('.class1') > -1) {
      found_class = true;
      return false;
   }
});

Answer 2

我不知道这是否可以通过jQuery轻松完成，但这是一种“vanilla”JavaScript方式来实现它...

样式表有一个cssRules属性，其中包含一个规则列表，按照它们在样式表中出现的索引排序。所以基本上，你可以“循环”规则并尝试找到一个与你的搜索匹配的规则。

功能：

function ruleExists(sheetId, selector) {
    var styleSheet = document.getElementById(sheetId);
    if(!styleSheet || styleSheet.tagName !== 'STYLE') return false;
    styleSheet = styleSheet.sheet.cssRules;
    for (var i = styleSheet.length; i--;) {
        if(styleSheet[i].selectorText === selector) return true;
    }
    return false;
}

所以只需在样式表中添加id（我发现它比使用document.styleSheets更方便，但您可以修改函数来代替使用它），并将样式表的id和所需的规则选择器传递给功能。（当然，如果您使用ID，这只适用于内联样式表）。这是一个例子：

您的样式表：

<style type="text/css" id="styleShizz">
    .class1 {
        color: red;
    }
</style>

您的JavaScript：

ruleExists('styleShizz', '.class1'); // true
ruleExists('styleShizz', '.class2'); // false

这是JSFiddle的一个例子：

http://jsfiddle.net/kfubnwx2/5/

Answer 3

JSBIN

你可以使用 .hasClass（）在jquery中检查它。该方法返回 true 或 false ，了解是否包含您想要的类。

Answer 4

试试这个：

if ($(".class1")[0]){
    //exists
} else {
    // Do something if class does not exist
}

如何检查样式是否附加

4 个答案: