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

Question

I have CSS in Style tag on the html header. What I want is that thru javascript to access all the classes of Style tag and check whether it has font-weight:bold or not; at the end I want an array of classes with font-weight:bold so that I can assign id attribute to them in javascript later.

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 from where I want to access the CSS class attribute.

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

use filter method it will retrun an array ok contains elements who have font-size: bold then just get the className by ok[index].className working example.

 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 2

Use document.styleSheets to get the information you want. This is an array which contains all the style sheets of the document. Each style sheet again has the cssRules array. Each rule has the cssText property which caontains the information you want.

document.styleSheets.forEach(function(styleSheet){

    styleSheet.cssRules.forEach(function(cssStyleRule) {

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


})

Answer 3

I do not know if you are required to use Javascript but within jQuery this would be quite easy. Then you only need this:

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

Which search through your CSS to find a DOM object that has your desired style: font-weight: bold; and for every object that it found an extra CLASS* is been added trough using the .attr() which makes your life much easier I guess. If you want to add an ID to each DOM object be careful that this ID should be an unique. All this can be seen within this JSFIDDLE

---

I recommend to you that you should set a class due to the fact that an ID should be unique and therefore you need to generate multiple id's. Which make selecting all those id's more difficult. (thanks @Kaiido for the tip)

---

In the end (in my created example) the output will be:

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

Given this CSS:

.class1 {
    font-weight: bold;    
}

.class2 {
    font-weight: normal;    
}

.class3 {
    font-weight: bold;    
}

Answer 4

You can use cssRules of <style> element sheet property, iterate style properties, values within a for loop; return selectorText of matched property, value

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