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

Question

我在 html header 上有 CSS in Style 标记。我想要的是通过 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;
}

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

//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 获取类名工作示例。

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);

<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>