javascript - 如何检索页面部分的 html 和样式？

Question

我正在尝试检索网页部分(通常是 div 或表格元素)的当前内容。目的是将其独立显示(例如用于打印目的)或将其插入另一页。对我来说，不仅要收集元素，还要收集它们的计算样式，这对我来说很重要，因为一些内容已被其他脚本突出显示或颜色编码。

我可以使用 innerHTML 获取 html，并使用 getComputedStyle 获取特定元素的样式。但是我如何获得整个部分的 html 和样式？

Answer 1

我曾经在 jQuery 中做了一些可以检索所有(不是特定部分)样式的东西； .css 文件、样式标签和某个页面的内部样式。我不知道如何处理它，但也许你可以以某种方式使用这个脚本。它并非在所有情况下都有效，有时会出现一些问题，因为我还没有对其进行足够的测试。 也许 StackOverflow 上还有一些其他人可以继续处理这段代码。 ;)

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