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

document.write() for adding a stylesheet causes document to be blank

本文关键字：文档 样式 添加 write document 用于      更新时间：2023-09-26

我只想在浏览器是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中运行页面时，在<body>标记中定义的<div>都不会在DOM中呈现或显示。

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

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

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，它可以找到匹配元素的列表。）

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>

它可能会起作用。

假设您想将样式表添加到head中，请看一下：将一些HTML附加到head标记中？

基本思想是使用

var newElement = document.createElement('element')

和

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

这将起作用（正如SharePoint.SE上用户1100的回答最初建议的那样）：

    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);
相关文章：