Добавить динамический стиль в JavaScript - PullRequest
Новая
       3

Добавить динамический стиль в JavaScript

0 голосов
/ 30 октября 2018

Я хочу скопировать существующие стили из головы и добавить их во всплывающее окно window.open. ниже мой код 

const styleElements = document.getElementsByTagName('style');

let printContents ='<html><head>';

forEach(styleElements, style => {
    printContents += style;
    console.log(printContents);
});

Но я получаю: 

[object HTMLStyleElement][object HTMLStyleElement][object HTMLStyleElement][object
HTMLStyleElement][object HTMLStyleElement][object HTMLStyleElement][object HTMLStyleElement]
[object HTMLStyleElement][object HTMLStyleElement][object HTMLStyleElement][object
HTMLStyleElement][object HTMLStyleElement][object HTMLStyleElement][object HTMLStyleElement]
[object HTMLStyleElement][object HTMLStyleElement][object HTMLStyleElement][object
HTMLStyleElement][object HTMLStyleElement][object HTMLStyleElement][object HTMLStyleElement]
[object HTMLStyleElement][object HTMLStyleElement][object HTMLStyleElement][object
HTMLStyleElement][object HTMLStyleElement][object HTMLStyleElement][object HTMLStyleElement]
[object HTMLStyleElement][object HTMLStyleElement][object HTMLStyleElement][object
HTMLStyleElement][object HTMLStyleElement][object HTMLStyleElement][object HTMLStyleElement]
[object HTMLStyleElement][object HTMLStyleElement][object HTMLStyleElement][object
HTMLStyleElement][object HTMLStyleElement][object HTMLStyleElement][object HTMLStyleElement]
[object HTMLStyleElement]

Ответы [ 4 ]

0 голосов
/ 30 октября 2018

Попробуйте это 

const styleElements = document.getElementsByTagName('style');

let printContents ='<html><head>';

Array.prototype.forEach.call(styleElements, style => {
  printContents += style.innerText;
});
console.log(printContents);
<style>
.test{background-color:red;}
</style>
<style>
.test2{background-color:green;}
</style>
0 голосов
/ 30 октября 2018

Обновите ваш код, как показано ниже. 

 forEach(styleElements, style => {
        printContents += style.textContent;
        console.log(printContents);
    });
0 голосов
/ 30 октября 2018

Element.outerHTML

Атрибут externalHTML интерфейса Element DOM получает сериализованный фрагмент HTML, описывающий элемент, включая его потомков. Также можно установить замену элемента узлами, проанализированными из заданной строки.

Вы пытаетесь объединить строку с объектом. Попробуйте Element.outerHTML следующим образом: 

const styleElements = document.getElementsByTagName('style');

let printContents ='<html><head>';

[...styleElements].forEach(style => {
  printContents += style.outerHTML;
  console.log(printContents);
});
<style>.test{margin: 10px;}</style>
0 голосов
/ 30 октября 2018

Ответ обновлен:

Чтобы скопировать стили в новое окно, открытое через window.open, вы можете попробовать скопировать только существующие объекты стиля в документ нового окна: 

var newWindow = window.open();
var newHead = newWindow.document.getElementsByTagName('head')[0];
var styles = document.getElementsByTagName('style');

Array.prototype.forEach.call(styles, function(style) {
  newHead.appendChild(style);
});

Вы можете просмотреть рабочий пример: https://codepen.io/anon/pen/MPdjrm

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...