Question

我只是在浏览器是Chrome或Opera的情况下尝试添加样式表。我使用YUI库有以下控制流程：

  if ((Y.UA.chrome > 0) || (Y.UA.opera > 0)){
    document.write("<link rel='stylesheet' media='print' type='text/css' href='../../../css/style_ticket_printing_header.css'/>");
  }

以下是有条件附加的css文件style_ticket_printing_header.css

@page 
{
  size: auto;  
  margin: 0mm;   
 }

以下是完整的HTML：

https://gist.github.com/ebbnormal/b1cff9d45914bc2f63a4

当我在Chrome中运行该页面时，<div>标记中定义的<body>都不会呈现或显示在DOM中。

特别令人困惑的是，当这个CSS以正常方式加载时（通过页面<link>中的<head>标记简单引用它，所有DOM都被完美加载。

最后我知道它成功地呈现了看到它是chrome的条件，因为我以前在成功执行的if块的主体中有一条警告消息。

Answer 1

document.write（）用于添加样式表导致文档为空白

右。在主页解析完成后使用document.write时，它会隐式执行document.open，这会清除页面。

相反，请使用createElement和appendChild：

if ((Y.UA.chrome > 0) || (Y.UA.opera > 0)){
    var link = document.createElement('link');
    link.rel = "stylesheet";
    link.media = "print";
    link.type = "text/css";
    link.href = "../../../css/style_ticket_printing_header.css";
    document.querySelector("head").appendChild(link);
}

或者，如果您真的想使用HTML :: - ）

if ((Y.UA.chrome > 0) || (Y.UA.opera > 0)){
    document.querySelector("head").insertAdjacentHTML(
        "beforeend",
        "<link rel='stylesheet' media='print' type='text/css' href='../../../css/style_ticket_printing_header.css'/>"
    );
}

（上述两种情况都假设您有一个head元素，您可能会这样做;它在格式良好的HTML文档中是必需的，要么是显式的，要么是因为浏览器将其添加为你[但显式最好]。）

关于querySelector：它找到与CSS选择器匹配的第一个元素。它得到了所有现代浏览器以及IE8的支持。（还有querySelectorAll，它会找到匹配元素的列表。）

Answer 2

在html文件中的<head>标记内，

<SCRIPT LANGUAGE="JavaScript">
    if ((Y.UA.chrome > 0) || (Y.UA.opera > 0)){
      document.write("<LI" + "NK rel='stylesheet' media='print' type='text/css' href='../../../css/style_ticket_printing_header.css'/>");
    }
</SCRIPT>

它可能有效。

Answer 3

假设您要将样式表添加到头部，请看一下：Append some HTML into the HEAD tag?

基本思路是使用

var newElement = document.createElement('element')

和

newElement.setAttribute('attr', 'val')

Answer 4

这将有效（原来suggested by users1100's answer on SharePoint.SE）：

    var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'http://website.com/css/stylesheet.css';
    link.media = 'all';
    head.appendChild(link);

用于添加样式表的document.write（）导致文档为空

4 个答案: