document.write 一个新页面，整个页面具有统一的字体大小

Question

我想打开一个新页面，其内容与旧页面中名为 Div1 的 div 相同。在我的 JavaScript 函数中，我有一个由 window.open 命令返回的 newWindow 变量，我将 Div1 的内部 HTML 写入 newWindow，我希望新页面中的每个文本的字体大小都为 7px。这是我写的：

newWindow.document.write('<html><head><title>Hello World</title>');
        newWindow.document.write('</head><body style="font-size:7px">');
        newWindow.document.write($('Div1').html());
        newWindow.document.write('</body></html>');

新页面呈现，但由于 Div1 中的内容被拆分为 3 个 fieldset，因此只有 fieldset 中的 legend 具有其字体大小更改为 7px，字段集中的所有内容仍具有默认字体大小（大约 11px）。如何将新页面中的每个文本更改为7px？我可以 document.write a link 到新页面的新样式表，但我更喜欢内联样式。谢谢。

旧页面（ASP.net）：

<div id="Div1" runat=server>
    <fieldset>
        <legend class="LLegends"> Header </legend>
            <asp:FormView ID="FormView1" runat="server">
                contents that I want to be 7px in the new page
            </asp:FormView>
     </fieldset>

     <!-- other 2 fieldsets with the same set up -->
</div>

Class LLegends（只有 class 个具有 CSS 样式的元素）

.LLegends {font-size: large;}

Answer 1

您可以试试这个片段。添加您的实际样式，然后将它们与其他 HTML 一起附加到文档中。 SO 正在阻止新 window 打开，所以试试这个 url：http://output.jsbin.com/sobewavagi

    (function(undefined) {
      /**
       *
       */
      'use strict';

      function addStyleOnOpen() {
        var style,
          stylesheet,
          pageTitle = 'my title',

          prnt = open();

        style = document.createElement("style");

        style.setAttribute('media', 'all');
        style.setAttribute('type', 'text/css');
        style.setAttribute('rel', 'stylesheet');

        style.appendChild(document.createTextNode(""));
        prnt.document.head.appendChild(style);

        stylesheet = style.sheet;

        stylesheet.insertRule('body {width: 100% !important;margin: 0 !important;padding: 0 !important;line-height: 1.45;font-family: "Open Sans", sans-serif;color: #999;background: none;font-size: 14pt;}', 0);

        stylesheet.insertRule('#new-window {color: green;}', stylesheet.cssRules.length);

        stylesheet.insertRule('h1 {color: red;}', stylesheet.cssRules.length);

        prnt.document.title = pageTitle;
        prnt.document.body.insertAdjacentHTML('afterbegin', '\n <h1>Heading</h1> \n <p id="new-window">Hello World!</p>');
      }

      document.getElementById('new-window').addEventListener('click', addStyleOnOpen, false);


    }(undefined));

<a href="#" id="new-window">Open</a>

Answer 2

无法在新页面的 body 上进行内联样式设置，但我认为我可以更改

newWindow.document.write('</head><body style="font-size:7px">');

收件人：

newWindow.document.write('<style>.body {"font-size:7px"}</style></head><body>');

document.write 一个新页面，整个页面具有统一的字体大小

document.write a new page with a unified font-size across the page

javascript

inline-styles