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

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
 }

• Kaiido: Instead of going through the style node, you may want to look at document.styleSheets but you'll miss the browser's defaults like <strong> nodes, so maybe you'd still be better to simply loop through all elements and check their getComputedStyle(el).fontWeight...
• ZPiDER: the style description text is not a structured part of the DOM (it is also not XML!), but there is a CSSOM for that specific purpose. have a look at developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets for more info! however if you are anything like me then you will probably not need it, but just change some styles with jQuery like $('my selector').css('my-attribute', 'myValue')
• Asons: Why do you need access to the style sheet?
• Ben: Can anyone pls provide js code no matter its document.styleSheets or document.style. @Kaiido @ZPiDER
• Rajshekar Reddy: @Emma I feel you are taking the wrong route to solve your problem. You have explained what you want. But I think it will b better if you can take some time and update your question to say WHY you want this or what the problem is I am sure the community will have better ideas.

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>

• Ben: thanks for the solution, which finally works for me :)

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

• Ben: Thanks for the answer, that's also the best simple answer of this question. which i later understood. ;) @Charlie H

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

• Ben: thanks @Rotan075 i got several solutions. your's one is also best in some situtaions.

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