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

admin管理员组

文章数量:1406925

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
    }

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
    }

• javascript
• html
• css
• stylesheet

Share Improve this question Follow edited Mar 25, 2016 at 10:26 L777 8,54733 gold badges4343 silver badges6767 bronze badges asked Mar 25, 2016 at 10:11 BenBen 17111 gold badge33 silver badges99 bronze badges 6

• 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... – Kaiido Commented Mar 25, 2016 at 10:13
• 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/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'); – ZPiDER Commented Mar 25, 2016 at 10:19
• Why do you need access to the style sheet? – Asons Commented Mar 25, 2016 at 10:22
• Can anyone pls provide js code no matter its document.styleSheets or document.style. @Kaiido @ZPiDER – Ben Commented Mar 25, 2016 at 10:23
• 1 @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 munity will have better ideas. – Rajshekar Reddy Commented Mar 25, 2016 at 10:37

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 2

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

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


})

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

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

本文标签： How can I access the class attribute in STYLE tag of html from javascriptStack Overflow