將樣式表加載到可嵌入的JavaScript代碼中。

Question

因此，我構建了一個小部件，它嵌入到我的客戶網站中，並帶有一些JS。正在呈現的代碼需要一些CSS，以便在網站上正常顯示和運行。我應該如何處理包含這些樣式表，並使其與JavaScript內部的代碼一起工作？

<div id="widget"></div> 
<script type="text/javascript"> 
    (function() { 
    var sp = document.createElement('script'); sp.type = 'text/javascript'; sp.async = true; 
    sp.src = 'http://example.com/widget/widget.js?key=248572180ede986058ede3519a25665e&r='+(new Date().getTime()); 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(sp, s); 
    })(); 
</script> 

Answer 1

這裏您可以將樣式表添加到您的head標籤的方式：

head = document.head || document.getElementsByTagName('head')[0]; 
var link = document.createElement('link'); 
link.rel = 'stylesheet'; 
link.href = ""; // css link goes here 
head.appendChild(link); 

，或者你可以創建一個風格標籤：

var css = ''; //put your css in here 
head = document.head || document.getElementsByTagName('head')[0]; 
style = document.createElement('style'); 

style.type = 'text/css'; 
if (style.styleSheet){ 
    style.styleSheet.cssText = css; 
} else { 
    style.appendChild(document.createTextNode(css)); 
} 

head.appendChild(style);