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

Question

我在 html header 的样式标签中有 CSS。我想要的是通过 javascript 访问 Style 标签的所有 classes 并检查它是否有 font-weight:bold ；最后我想要一个 classes 和 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 class 属性的位置。

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

使用document.styleSheets获取您想要的信息。这是一个数组，其中包含文档的所有样式 sheet。每个样式 sheet 再次具有 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 2

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

Answer 3

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

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

搜索您的 CSS 以找到具有您所需样式的 DOM 对象：font-weight: bold; 并且对于它找到的每个对象都有一个额外的 CLASS* 是通过使用 .attr() 添加的，我想这会让你的生活更轻松。如果要为每个 DOM 对象添加一个 ID，请注意该 ID 应该是唯一的。这一切都可以在这个JSFIDDLE

中看到

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

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

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

鉴于此 CSS:

.class1 {
    font-weight: bold;    
}

.class2 {
    font-weight: normal;    
}

.class3 {
    font-weight: bold;    
}

Answer 4

您可以使用 <style> 元素的 cssRules sheet 属性，在 for 循环中迭代 style 属性和值； return 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 属性？

How can I access the class attribute in STYLE tag of html from javascript?

html

javascript

css

stylesheet