Как скопировать весь стиль CSS из одного DOM в другой?

Question

Я использую этот метод для копирования DIV из моего веб-приложения для печати на новой вкладке: https://stackoverflow.com/a/40389924/1062933 [ спасибо! ]

  printForm(): void {
    let printContents: any = document.getElementById('formTerms').innerHTML;
    let w: any = window.open();
    w.document.write(printContents);
    w.document.write('<scr' + 'ipt type="text/javascript">' + 'window.onload = function() { window.print(); window.close(); };' + '</sc' + 'ript>');
    w.document.close(); // necessary for IE >= 10
    w.focus(); // necessary for IE >= 10
  }

Но в результатеHTML не форматируется без CSS, который был на главной вкладке.

Есть ли способ также скопировать стили CSS, используемые в этом DIV?

IЯ использую Angular4 и Teradata Covalent

Answer 1

Если вы знаете, какие теги <style> используются для стиля div, вы можете скопировать их содержимое в новые теги стиля в новом окне.Тем не менее, это не будет включать стили непосредственно в самом div.

Белое, немного более ручное, функция getComputedStyle может дать текущий стиль элемента, который вы можете затемприменить в новом окне.Если в div, который вы копируете, есть дети, вам придется делать это рекурсивно или преобразовывать общие стили в сгенерированную таблицу стилей.

На связанной странице есть примеры, но я будускопируйте это здесь:

// print one or all of the style properties on the element
function dumpComputedStyles(elem,prop) {

  var cs = window.getComputedStyle(elem,null);
  if (prop) {
    console.log(prop+" : "+cs.getPropertyValue(prop));
    return;
  }

  var len = cs.length;
  for (var i=0;i<len;i++) {

    var style = cs[i];
    console.log(style+" : "+cs.getPropertyValue(style));
  }

}