Question

我在html标题上的Style标签中有CSS。我想要的是通过javascript访问Style标签的所有类，并检查它是否有font-weight:bold;最后我想要一个带font-weight:bold的类数组，这样我以后可以在javascript中为它们分配id属性。

CSS

span {
  white-space: pre-wrap;
}

.pt-Normal {
  line-height: 107.9%;
  margin-bottom: 8pt;
  font-family: Ca**strong text**libri;
  font-size: 20pt;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

.pt-DefaultParagraphFont-000000 {
  font-family: Calibri;
  font-size: 11pt;
  font-style: normal;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

.pt-DefaultParagraphFont-000001 {
  font-family: Calibri;
  font-size: 20pt;
  font-style: normal;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

.pt-Normal-000002 {
  line-height: 107.9%;
  margin-bottom: 8pt;
  font-family: Calibri;
  font-size: 11pt;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

.pt-DefaultParagraphFont-000003 {
  color: #FF0000;
  font-family: Calibri;
  font-size: 11pt;
  font-style: normal;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

JAVASCRIPT，我想从中访问CSS类属性。

//this is just example of one class having fontWeight:bold, but i want to do this in a generic way.

function sec(){var s = document.getElementsByClassName("pt-DefaultParagraphFont-000001");
        for (var z = 0; z <= s.length;z++){s[z].setAttribute("id",z.toString());}}
    var sc = document.getElementsByTagName("STYLE").style;
        if (sc.fontWeight == bold){
        //here i want to get all the class which have class attribute fontWeight:bold
        //later on i want to assign id attribute to those elements which have fontWeight:bold
    }

Answer 1

使用filter方法，它将重新生成数组ok包含font-size: bold的元素，然后只需ok[index].className获取className 工作实例。

＆＃13;

var ok = $('[class]').filter(function() {
  return $(this).css('font-weight').toLowerCase().indexOf('bold') > -1;
});
var arrayBold = []
for(var i=0;i<ok.length;i++){
  arrayBold.push(ok[i].className);
}
console.log(arrayBold);

＆＃13;

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pt-Normal"></div>
<div class="pt-DefaultParagraphFont-000000"></div>
<div class="pt-DefaultParagraphFont-000001"></div>
<div class="pt-Normal-000002"></div>
<div class="pt-DefaultParagraphFont-000003"></div>
<style>
span {
  white-space: pre-wrap;
}

.pt-Normal {
  line-height: 107.9%;
  margin-bottom: 8pt;
  font-family: Ca**strong text**libri;
  font-size: 20pt;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

.pt-DefaultParagraphFont-000000 {
  font-family: Calibri;
  font-size: 11pt;
  font-style: normal;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

.pt-DefaultParagraphFont-000001 {
  font-family: Calibri;
  font-size: 20pt;
  font-style: normal;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

.pt-Normal-000002 {
  line-height: 107.9%;
  margin-bottom: 8pt;
  font-family: Calibri;
  font-size: 11pt;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

.pt-DefaultParagraphFont-000003 {
  color: #FF0000;
  font-family: Calibri;
  font-size: 11pt;
  font-style: normal;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
</style>

＆＃13;

Answer 2

使用document.styleSheets获取所需信息。这是一个包含文档所有样式表的数组。每个样式表再次具有cssRules数组。每条规则都有cssText属性，该属性可以包含您想要的信息。

document.styleSheets.forEach(function(styleSheet){

    styleSheet.cssRules.forEach(function(cssStyleRule) {

         console.log(cssStyleRule.cssText);   //Add your condition here and build the array
    })


})

Answer 3

我不知道你是否需要使用Javascript，但在jQuery中这很容易。那你只需要这个：

$("*").each(function() {
    if ($(this).css("font-weight") == "bold") {
        $(this).attr("class", "bold");
    }
});

通过您的CSS搜索找到具有所需样式的DOM对象：font-weight: bold;以及找到额外 CLASS * 的每个对象都是使用{{ 1}}这让我的生活变得更轻松。如果要为每个DOM对象添加ID，请注意此ID应该是唯一的。所有这些都可以在JSFIDDLE

中看到

我建议你应该设置一个类，因为ID应该是唯一的，因此你需要生成多个id。这使得选择所有这些id更加困难。（感谢@Kaiido提示）

最后（在我创建的示例中）输出将是：

.attr()

鉴于此CSS：

<body>
  <p class="class1 bold">
    SAMPLE TEXT 1
</p>
<p>
    SAMPLE TEXT 2
</p>
<p class="class2">
    SAMPLE TEXT 3
</p>
<p class="class3 bold">
    SAMPLE TEXT 4
</p>
</body>

Answer 4

您可以使用cssRules <style>元素sheet属性，迭代style属性，for循环中的值;返回匹配属性的值selectorText，值

var style = document.querySelector("style")
, rules = style.sheet.cssRules
, matches = []
, match = ["fontWeight", "bold"];
for (var i = 0; i < rules.length; i++) {
  if (rules[i].style[match[0]] === match[1]) {
    matches.push(rules[i].selectorText)
  }
}

console.log(matches)

span {
  white-space: pre-wrap;
}
.pt-Normal {
  line-height: 107.9%;
  margin-bottom: 8pt;
  font-family: font-size: 20pt;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}
.pt-DefaultParagraphFont-000000 {
  font-family: Calibri;
  font-size: 11pt;
  font-style: normal;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.pt-DefaultParagraphFont-000001 {
  font-family: Calibri;
  font-size: 20pt;
  font-style: normal;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.pt-Normal-000002 {
  line-height: 107.9%;
  margin-bottom: 8pt;
  font-family: Calibri;
  font-size: 11pt;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}
.pt-DefaultParagraphFont-000003 {
  color: #FF0000;
  font-family: Calibri;
  font-size: 11pt;
  font-style: normal;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

如何从javascript访问html的STYLE标签中的class属性？

4 个答案: