How to change the style of the popup preview blob using JavaScript?-CodePudding

I've been trying to change the styling of the popup window this opens, but can't figure out how to make it work at all..

function preview() {
  temp = document.editorial.textarea3.value;
  preWindow = open("", "preWindow", "status=no,toolbar=n,menubar=y");
  preWindow.document.style = 'background-color: #222';
  preWindow.document.open();
  preWindow.document.write(temp);
  preWindow.document.close();
}

In this script, I only used background-color since it's easier to see if it took effect, but what I really need is to specify its width, height, and position.

I can't find anything how to do this, or maybe because I'm not sure what's it really called..

Anyways, thank you in advance for any help.

CodePudding user response：

Document.write the style. It is not the document element you can style, but the content

function preview() {
  temp = document.editorial.textarea3.value;
  preWindow = open("", "preWindow", "menubar,width=500,height=500");
  preWindow.document.write(`<body style="background-color: #222">${temp}</body>`);
  preWindow.document.close();
}

CodePudding user response：

You can style the body tag after the write

And to change the size you can use windowFeatures params of open

Like:

function preview() {
  temp = document.editorial.textarea3.value;
  preWindow = open("", "preWindow", "status=no,toolbar=n,menubar=y,width=100,height=100");
  preWindow.document.open();
  preWindow.document.write(temp);
  preWindow.document.body.style.backgroundColor = '#222';
  preWindow.document.close();
}