CODEWITHSUNDEEP
javascriptjquerycss
Adrian
Adrian

Reputation: 523

get css from <style> as text for output

How can I grab entire css from <style id="myId" type="text/css"> to push it into a JSON file?

I am adding dynamically css to <style>, so in my html the style is empty.

Tried with $('#myId').text(), $('#myId').html() with no luck.

I need for this type of output:

function addRule(selector, rules) {
      var stylesheet = document.getElementById('myId');
      if (stylesheet) {
        stylesheet = stylesheet.sheet;
        if (stylesheet.addRule) {
          for (var i = 0; i < selector.length; ++i) {
            stylesheet.addRule(selector[i], rules);
          }
        } else if (stylesheet.insertRule) {
          stylesheet.insertRule(selector.join(',') + ' { ' + rules + ' }', stylesheet.cssRules.length);
        }
      }
}
function pushToJson(){
  item {}
  dataCSS = []
  item ["myCSS"] = '?????'; 
  // here I need the css 
  // eg: "h1 {margin:0;} .title {padding:10px 0;}"
  dataCSS.push(item);
}
addRule(['.title, h2'], 'color:red;');

Any help?

Upvotes: 0

Views: 198

Answers (5)

fdomn-m
fdomn-m

Reputation: 28611

The equivalent of stylesheet.addRule and stylesheet.insertRule is

stylesheet.cssRules

Here's an example using .cssRules that ignores all the inherited and "actual" css that's applied and reads only the rules in your style tag

See https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet for more info.

function addRule(selector, rules) {
  var stylesheet = document.getElementById('myId');
  if (stylesheet) {
    stylesheet = stylesheet.sheet;
    if (stylesheet.addRule) {
      for (var i = 0; i < selector.length; ++i) {
        stylesheet.addRule(selector[i], rules);
      }
    } else if (stylesheet.insertRule) {
      stylesheet.insertRule(selector.join(',') + ' { ' + rules + ' }', stylesheet.cssRules.length);
    }
  }
}

addRule(['.title, h2'], 'color:red;');
addRule(['body h2'], 'font-weight:normal;');

function pushToJson() {
  var stylesheet = document.getElementById('myId');
  if (stylesheet) {
    stylesheet = stylesheet.sheet;
    for(var i = 0; i<stylesheet.cssRules.length;++i) {
        // Do the JSON magic here
        console.dir(
            stylesheet.cssRules[i].selectorText 
            + " : " 
            + stylesheet.cssRules[i].style.cssText)
    }
  }
}

pushToJson();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style id="myId" type="text/css">
  body {
    background-color: lightblue;
  }
</style>
<h2>Title</h2>

Upvotes: 1

kind user
kind user

Reputation: 41893

Following code grabs the entire code from the specified style tag. You can then store it inside a new variable or do whatever you want with it.

var newJSON = {};

function addRule(selector, rules) {
  var stylesheet = document.getElementById('myId');
  if (stylesheet) {
    stylesheet = stylesheet.sheet;
    if (stylesheet.addRule) {
      for (var i = 0; i < selector.length; ++i) {
        stylesheet.addRule(selector[i], rules);
      }
    } else if (stylesheet.insertRule) {
      stylesheet.insertRule(selector.join(',') + ' { ' + rules + ' }', stylesheet.cssRules.length);
    }
  }
  pushToJson();
}

function pushToJson() {
  newJSON = $('#myId').html();
  console.log(newJSON);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style id="myId" type="text/css">
  body {
    background-color: lightblue;
  }
</style>

Upvotes: 1

Vitalii Andrusishyn
Vitalii Andrusishyn

Reputation: 4162

Use code like this:

var element = document.getElementById('myId'),
    style = window.getComputedStyle(element);
jsonStyle = JSON.stringify(style);

Upvotes: 0

Krishna9960
Krishna9960

Reputation: 529

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>

  </title>
  <link rel="stylesheet" href="">
  <style>
    #myname{
      color: red;
    }
  </style>
</head>    


//This Line will yield you the style innerHTML

console.log(document.head.innerHTML);

Upvotes: 0

Alexandre Nicolas
Alexandre Nicolas

Reputation: 1949

You should try this:

$('#myId').css()

Upvotes: 0

Related Questions