如何从 javascript 访问 html 的 STYLE 标记中的类属性？答案

【问题标题】：How can I access the class attribute in STYLE tag of html from javascript?如何从 javascript 访问 html 的 STYLE 标记中的类属性？
【发布时间】：2016-03-25 10:11:20
【问题描述】：

我在 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
    }

【问题讨论】：

您可能想查看document.styleSheets，而不是通过样式节点，但您会错过浏览器的默认设置，例如<strong> 节点，所以也许您最好还是简单地循环通过所有元素并检查他们的getComputedStyle(el).fontWeight...
样式描述文本不是 DOM 的结构化部分（它也不是 XML！），但是有一个用于特定目的的 CSSOM。查看developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets 了解更多信息！但是，如果您像我一样，那么您可能不需要它，而只需使用 jQuery 更改一些样式，例如 $('my selector').css('my-attribute', 'myValue');
为什么需要访问样式表？
无论document.styleSheets 还是document.style，任何人都可以提供js 代码。 @Kaiido @ZPiDER
@Emma 我觉得你解决问题的方法是错误的。你已经解释了你想要什么。但我认为，如果您能花一些时间更新您的问题，说出您为什么想要这个或问题是什么，那会更好。我相信社区会有更好的想法。

标签： javascript html css stylesheet

【解决方案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>

【讨论】：

感谢您的解决方案，它终于对我有用了:)

【解决方案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
    })


})

【讨论】：

感谢您的回答，这也是这个问题的最佳简单答案。我后来明白了。 ;) @Charlie H

【解决方案3】：

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

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

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

我建议您设置一个类，因为 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;    
}

【讨论】：

谢谢@Rotan075 我有几个解决方案。在某些情况下，您的也是最好的。

【解决方案4】：

您可以使用cssRules 的<style> 元素sheet 属性，在for 循环内迭代style 属性、值；返回匹配属性的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;
}

【讨论】：