Jquery - How to Get All Styles/CSS (Defined Within Internal/External Document) with HTML of an Element

jQuery - How to get all styles/css (defined within internal/external document) with HTML of an element

outerHTML (not sure, you need it — just in case)

Limitations: CSSOM is used and stylesheets should be from the same origin.

function getElementChildrenAndStyles(selector) {
  var html = $(selector).outerHTML();

  selector = selector.split(",").map(function(subselector){
    return subselector + "," + subselector + " *";
  }).join(",");
  elts = $(selector);

  var rulesUsed = [];
  // main part: walking through all declared style rules
  // and checking, whether it is applied to some element
  sheets = document.styleSheets;
  for(var c = 0; c < sheets.length; c++) {
    var rules = sheets[c].rules || sheets[c].cssRules;
    for(var r = 0; r < rules.length; r++) {
      var selectorText = rules[r].selectorText;
      var matchedElts = $(selectorText);
      for (var i = 0; i < elts.length; i++) {
        if (matchedElts.index(elts[i]) != -1) {
          rulesUsed.push(rules[r]); break;
        }
      }
    }
  }
  var style = rulesUsed.map(function(cssRule){
    if (cssRule.style) {
      var cssText = cssRule.style.cssText.toLowerCase();
    } else {
      var cssText = cssRule.cssText;
    }
    // some beautifying of css
    return cssText.replace(/(\{|;)\s+/g, "\$1\n  ").replace(/\A\s+}/, "}");
    //                 set indent for css here ^ 
  }).join("\n");
  return "<style>\n" + style + "\n</style>\n\n" + html;
}

usage:

getElementChildrenAndStyles("#divId");

Read Style properties from external style sheet (from file)

You can load it using the onload handler. This will be called when the stylesheet has completed loading. Continue from inside the handler.

(It's important to define the load handler before adding the link element to head as when added the load process will start).

Example

I extracted attributes to make it more readable, modify as needed -
(Remember to also handle errors, ie. onerror).

$("head").append(

  $("<link rel='stylesheet' type='text/css'>")

    .attr("href", "http://cdn.sstatic.net/stackoverflow/all.css")

    .on("load", cssLoaded)

);

function cssLoaded(e) {

  alert("wee...");    // the sheet has loaded, continue from here

};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Get html source using javascript including style

I don't think jQuery is necessary for fetching the HTML Source.
Just use

document.documentElement.outerHTML

This will include the CSS attributes as well.

How to get the ultimate, final calculated style value on an HTML element?

You're not seeing any of the stylesheet styles because you haven't attached your test element to the document. After creating your testElement, doing:

document.body.appendChild(testElement);

Should suffice.

Alternatively, if having the test element attached permanently is a problem, you could attach and detach it in your test function:

if (!entity_type_color_table[entity_type]) {
    testElement.className = entity_type + "-color";
    document.body.appendChild(testElement);
    entity_type_color_table[entity_type] = 
        document.defaultView.getComputedStyle(testElement, null)
        .getPropertyValue("color");
    testElement.remove();
}     

Get a CSS value from external style sheet with Javascript/jQuery

With jQuery:

// Scoping function just to avoid creating a global

(function() {

    var $p = $("<p></p>").hide().appendTo("body");

    console.log($p.css("color"));

    $p.remove();

})();

p {color: blue}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Get *all* CSS attributes with jQuery

What about something like this:

jQuery CSS plugin that returns computed style of element to pseudo clone that element?

It is ugly, but it appeared to work for the poster...

This also may be of interest:
https://developer.mozilla.org/en/DOM:window.getComputedStyle

Get inline css of an element if there is any (no Internal or External css)

You can get value of any internal css using this script: Try this:

Jsfiddle: https://jsfiddle.net/hfud139c/

html:

<div id="myh1" style="padding-top:10px;height:10px;">Content</div>

Jquery:

$.fn.inlineStyle = function (prop) {
         var styles = this.attr("style"),
             value;
         styles && styles.split(";").forEach(function (e) {
             var style = e.split(":");
             if ($.trim(style[0]) === prop) {
                 value = style[1];           
             }                    
         });   
         return value;
    };

    var width = $("#myh1").inlineStyle("padding-top");

---

Related Topics