如何同时检索HTML和页面部分的样式？

Question

I am trying to retrieve the current content of a Web page section (usually a div or table element). The objective is to display it as standalone (for example for printing purposes) or insert it in another page. It is essential for me to collect not only the elements but also their computed styles, as some content has been highlighted or color coded by other scripts.

I can get the html with innerHTML, and get the style of a specific element with getComputedStyle. But how would I get both html and styles for a whole section?

Answer 1

I once made something in jQuery which could retrieve ALL (not specific parts) the styles; .css files, style-tags and inner-styles of a certain page. I didn't know what to do with it but maybe you can use this script somehow. It doesn't work in all scenarios and sometimes it will be a little buggy because I haven't tested it enough. Maybe there are some other people on StackOverflow that can continue on with this piece of code. ;)

var all_css = {stylesheets:[], inner_head_styles:[], body_styles:[]};

$(function(){
  $.ajaxSetup({ 
    async: true,
    crossDomain: true,
    dataType: "text",
    type: "GET"
  });

  var calls = [];
  /*every non-cross-domain .css file*/
  $("head link[rel='stylesheet']").each(function(a, stylesheet){
    if($(stylesheet).attr("href").match(/((ftp|http|https):\/\/)?/)[0] == ""){
      var css_source = $(stylesheet).attr("href");
      var css_call = $.ajax({
        url: css_source,
        success: function(data){
          all_css.stylesheets.push(data);
        },
        error: function(e, f){
          alert(e, f);
        }
      });

      calls.push(css_call);
    }
    else{
      console.log("CSS SOLVER: Cross domain CSS's aren't going to be loaded!");
    }
  });

  /*every head style*/
  $("style").each(function(b, style){
    all_css.inner_head_styles.push($(this).text());
  });

  /*every element in the body that has a style attribute*/
  $("body[style], body *[style]").each(function(c, style){
    var css_html_node = $(style).context.nodeName;
    var css_class = typeof($(style).attr("class")) != "undefined" ? "."+$(style).attr("class") : "";
    var css_id = typeof($(style).attr("id")) != "undefined" ? "#"+$(style).attr("id") : "";

    css_class = css_class.replace(/\s/g, ".");
    var css_string = css_html_node + css_id + css_class + "{" + $(style).attr("style") + "}";
    all_css.body_styles.push(css_string);
  });


  $.when.apply(null, calls).done(function(){
    console.log(all_css);
  });
});

Answer 2

You can't really retrieve the styles for a section, you have to get the styles on an element.

You have to bear in mind that you aren't dealing with the original CSS any longer, but the calculated style for each element.