正確包含CSS後的方法<head>

顯然在文檔主體中添加<link rel="stylesheet" ...被W3C標準認爲是不好的做法。同樣在體內增加<style>塊...正確包含CSS後的方法<head>

那麼，有沒有任何符合標準的解決方案添加<head>標籤以外CSS？就像在文件的末尾一樣。

2012-05-19 Alex

你爲什麼想這樣做？只是好奇 –

好吧，有一些罕見的情況下，稍後包含樣式很有用。在我的情況下，我有一個很好的調試功能，輸出一些CSS樣式的信息。我可以在任何時候調用這個函數，或者不。但如果不使用CSS，我不想包含CSS。 – Alex

只要你知道它可能會在某些情況下被使用，那麼包含CSS就不會被使用。 – BoltClock

如果你只希望包括在特定事件的CSS樣式，沒有什麼阻止你的頭這樣做：

var linkElement = document.createElement("link"); 
linkElement.rel = "stylesheet"; 
linkElement.href = "path/to/file.css"; //Replace here 

document.head.appendChild(linkElement);

這在異步的方式添加樣式表的好處，這不會阻止瀏覽器下載任何其他內容。

來源

2012-05-19 13:00:14

謝謝你，@IonicãBizãu，你的編輯很好。 –

不客氣。你幫助我的兄弟，我們都投了你的票。 :-) –

@IonicãBizãu：\ o / –

只有HTML5允許使用scoped屬性，但要確保正確聲明DOCTYPE。要解決這個問題

<style type="text/css" scoped> 
.textbox { 
color: pink 
} 
</style>

來源

2012-05-19 12:46:31 PenguinKenny

你是說如果我把'scoped'放在那裏，我可以在任何地方使用它？這真棒：D – Alex

尚未支持此功能的瀏覽器。瀏覽器只是忽略'scoped'屬性並將樣式表解釋爲文檔的全局。 body內的'style'元素工作得很好，它在HTML規範中被聲明爲無效。 –

@ JukkaK.Korpela：如果我用我的鐵鍬將釘子釘入牆上，它也可能會起作用。這不會使它確定。由於瀏覽器非常努力地做出正確的選擇，因此它無效。不要讓它工作。 –

一種方法是加載CSS與.get()，並追加到只在需要時頭部標記：

JQUERY

var css = "foobar.css"; 
var callback = function() { 
    alert("CSS is now included"); 
    // your jquery plugin for a navigation menu or what ever... 
}; 

$.get(css, function(data){ 
    $("<style type=\"text/css\">" + data + "</style>").appendTo(document.head); 
    callback(); 
});

的callback功能用於允許script代碼取決於CSS文件的格式正確，只有在CSS之後才能運行已被添加！

來源

2012-05-19 12:46:56 Zuul

http://stackoverflow.com/a/2826810/871050 –

真是的！但是，如何在需要時動態地將「css」文件加載到頭部以使文檔正確響應？程序員已經這麼做了很多年了，用簡單的老'javascript';）因爲我的項目是基於PHP的，所以我在服務器端腳本解決這個問題之前什麼都得到了瀏覽器，但在這種情況下...... – Zuul

請參閱我的答案。這可以用普通的JavaScript輕鬆完成。我得到的代碼比你短。 –

我認爲這個標準很大程度上被大多數人忽略了，一旦你開始做服務器端編程或DHTML之類的事情。

對於靜態HTML文件，您絕對可以/應遵循HEAD標籤中僅包含CSS的規則，但對於條件輸出和交互性，它有時可以簡化具有條件樣式的事物。考慮到最後，這會影響最終的文檔。即使瀏覽器可能會呈現它，如果你自己去查看源代碼，如果所有定義佈局/顯示的樣式都在HEAD中，那麼讀起來會更簡單。當然，還有一些其他的例子和原因，爲什麼這是不好的做法。

HTML標準存在於服務器端腳本和DHTML之外，即它不是HTML/SSS/JavaScript標準。

來源

2012-05-19 14:57:21 Matthew

-2

如果你談論的是外部CSS表，那麼正確的方法如下：

<link href="....link to your style...." rel="stylesheet">

如果你想包括一個內嵌的CSS，那麼你只需要做如下：

<style> 
....Your style here... 
</style>

來源

2015-11-25 14:09:15

正確包含CSS後的方法<head>

回答

相關問題