document.write（）用於添加樣式表導致文檔變爲空

我想在瀏覽器爲Chrome或Opera的情況下只添加樣式表。我使用YUI庫中的以下控制流：document.write（）用於添加樣式表導致文檔變爲空

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>，所有的DOM的<link>標籤引用它是完全加載。

最後我知道，它成功地使看到的情況是鍍鉻，因爲我以前在成功執行，如果塊體有一個警告消息

來源

2015-11-05 Thalatta

在文檔完成後使用'document.write（）'時，它會隱式地擦除整個文檔並啓動一個新的空文檔。 – Pointy

@積分啊！那麼有沒有辦法添加CSS，而不使用'document.write'？ – Thalatta

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

來源

2015-11-05 22:15:38

如果將上面的腳本放在文檔的「」中，它會不起作用嗎？ – Thalatta

@Thalatta：你的意思是答案中的腳本？是的，它會工作。如果你的意思是這個問題中的腳本，那麼**在頁面的主要解析過程中評估它**。您對問題的描述表明它稍後會進行評估，例如某種「DOM /窗口已準備好」回調。 –

-3

這將工作（如最初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);

來源

2015-11-05 22:15:06

爲什麼用'media ='all''替換'media ='print''？使用不同的網址？當不需要時包含'id'？如果您要[複製並粘貼答案]（http://sharepoint.stackexchange.com/a/148337），至少要提供歸屬地。 –

-1

假設您想要將樣式表添加到頭部，看看這個：Append some HTML into the HEAD tag?

的基本思想是利用

var newElement = document.createElement('element')

和

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

來源

2015-11-05 22:16:12

內的您的<head>標記爲html文件，

<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>

它可能工作。

來源

2016-08-27 09:03:40

回答

相關問題