CODEWITHSUNDEEP
javascriptcssdom
Mustapha GANGA
Mustapha GANGA

Reputation: 833

How to retrieve css text from style added with insertRule?

I have a tag whose content has been added dynamically with the insertRule function. I would like to retrieve the text content of the related style

I've tried document.getElementById('style').innerHTML and document.getElementById('style').text, but they return empty string

// Add style a tag to head
var style = document.createElement("style");
style.id = "style",
style.type = "text/css",
document.head.appendChild(style);
var sheet = style.sheet;
// Insert some stylesheet rules
sheet.insertRule("p {background-color: red}", sheet.length);
sheet.insertRule("p {color: white}", sheet.length);
// Try to retrieve the css text
document.getElementById('style').innerHTML; // returns ""
document.getElementById('style').text; // returns undefined

I expect to get the text css present in the stylesheet. For example, the above style must return p {background-color: red} p {color: white}

Upvotes: 0

Views: 929

Answers (3)

sarvon ks
sarvon ks

Reputation: 616

var style = document.createElement("style");
    style.id = "style",
    style.type = "text/css",
    document.head.appendChild(style);
    var sheet = style.sheet;
    // Insert some stylesheet rules
    sheet.insertRule("p {background-color: red}", sheet.length);
    sheet.insertRule("p {color: white}", sheet.length);
    sheet.insertRule("div {color: green}", sheet.length);

    function getRule(){
      var cssFullText = "";
      [...sheet.cssRules].forEach(({cssText})=> cssFullText += `${cssText} `);
      console.log(cssFullText)
    }
<p>Test line</p>
    <p>Test line</p>
    <button onClick="getRule()">Get css HTML</button>

Upvotes: 1

Sujit Y. Kulkarni
Sujit Y. Kulkarni

Reputation: 1386

You are almost there. Stylesheet apparently become part of the document object.

So document.styleSheets will return a list (an array) of styleSheets attached to the document.

Each style sheet then can be accessed by looping through it.

document.styleSheets[0].cssRules will give you the array of cssRules of the style sheet.

Again, you can loop through cssRules to access rules written there.

Note:

Firefox throws SecurityError: The operation is insecure. error if you try to access cssRules.

Read more about CSSStyleSheet interface.

Upvotes: 0

Syed mohamed aladeen
Syed mohamed aladeen

Reputation: 6755

Try like this. I have added sample snippet to get all style tags.

function addStyle(styles) { 
              
  /* Create style document */ 
  var css = document.createElement('style'); 
  css.type = 'text/css'; 

  if (css.styleSheet)  
  css.styleSheet.cssText = styles; 
  else  
  css.appendChild(document.createTextNode(styles)); 

  /* Append style to the tag name */ 
  document.getElementsByTagName("head")[0].appendChild(css); 
  
  // Try to retrieve the css text
  var styleTag = document.getElementsByTagName('style');
  for(var i=0; i<styleTag.length;i++){
    console.log(styleTag[i].innerHTML); // returns
  }
} 

/* Set the style */ 
var styles = 'h1 { color: green }'; 
styles += ' body { text-align: center }'; 

/* Function call */ 
window.onload = function() { addStyle(styles) };

Upvotes: 0

Related Questions