使用javascript動態添加javascript和css文件到html

我正在構建一個javascript小部件，並且需要動態地將我的小部件css和js文件添加到客戶端頁面。使用javascript動態添加javascript和css文件到html

我做這個現在：

var css = document.createElement('link'); 
    css.setAttribute('rel', 'stylesheet'); 
    css.setAttribute('href', 'css path'); 
    document.getElementById('test').appendChild(css); 
    alert(document.getElementById('test').innerHTML);

不過，這並不元素添加到DOM。警報正確顯示。

我失蹤了？

EDIT1：

下面是更新後的代碼（注意，這只是一個測試頁面）。

<html> 
    <head> 

    </head> 
    <body> 
     <div id="test"> 
      test 
     </div> 

     <script type="text/javascript"> 


    var css = document.createElement('link'); 
    css.setAttribute('rel', 'stylesheet'); 
    css.setAttribute("type", "text/css"); 
    css.setAttribute('href', 'path'); 
    var header = document.getElementsByTagName("head")[0]; 
    header.appendChild(css); 
    alert(header.innerHTML); 

     </script> 
    </body> 
</html>

header.InnerHtml顯示正確，但沒有添加到頁面。

來源

2010-10-07 brpaz

你居然href'設置''到」 CSS路徑「'，或者你設置爲你的CSS的實際路徑？ - 另外，將CSS附加到''。 – 2010-10-07 14:57:04

路徑是正確的。我在瀏覽器中粘貼了網址，並顯示了我的css文件。 – brpaz 2010-10-07 15:23:05

路徑是正確的，但文件的CSS權限是正確的？如果直接插入文檔，文件是否被正確解析？ – 2010-10-07 16:57:25

您是否嘗試將css添加到<頭部>部分？

var css = document.createElement('link'); 
    css.setAttribute('rel', 'stylesheet'); 
    css.setAttribute('href', 'css path'); 
    document.getElementsByTagName('head')[0].appendChild(css);

來源

2010-10-07 14:57:05

+1 - CSS包括需要在文檔的「head」元素中聲明。將它包含在其他地方是無效的。 – Fenton 2010-10-07 14:59:55

我認爲你需要將它連接到你的HTML的，不是單純的文檔：

var css = document.createElement('link'); 
css.setAttribute('rel', 'stylesheet'); 
css.setAttribute("type", "text/css"); 
css.setAttribute('href', 'css path'); 
var header = document.getElementsByTagName("head")[0]; 
header.appendChild(css);

希望這有助於:)

來源

2010-10-07 15:00:19 mrjames

它仍然沒有工作。標題元素的innerHTML是正確的，但沒有任何內容添加到頁面中。我將在第一篇文章中發佈更新後的代碼。 – brpaz 2010-10-07 15:18:50

使用javascript動態添加javascript和css文件到html

回答

相關問題