페이지 섹션의 HTML과 스타일을 모두 검색하는 방법은 무엇입니까?

Question

웹 페이지 섹션 (일반적으로 div 또는 테이블 요소)의 현재 내용을 검색하려고합니다. 목적은 독립형 (예 : 인쇄용)으로 표시하거나 다른 페이지에 삽입하는 것입니다. 어떤 내용이 다른 스크립트에 의해 강조 표시되었거나 색으로 구분 되었기 때문에 요소뿐만 아니라 계산 된 스타일도 수집해야합니다.

HTML을 innerHTML로 가져올 수 있으며 getComputedStyle을 사용하여 특정 요소의 스타일을 가져올 수 있습니다. 하지만 전체 섹션에 대해 html과 스타일을 모두 얻으려면 어떻게해야합니까?

Answer 1

섹션의 스타일을 실제로 검색 할 수는 없으므로 요소에 스타일을 가져와야합니다.

더 이상 원본 CSS를 다루지 않고 각 요소에 대해 계산 된 스타일을 기억해야합니다.

Answer 2

이전에 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); 
    }); 
});