HTML體中的Javascript可以操作head元素嗎？

Question

我已經編寫了一個小部件，在後端允許您通過OAuth2/Google Picker UI從您的谷歌帳號中選擇一個文件

因爲小部件呈現在網頁正文的前端不能包含style標籤，需要將其動態添加到標頭。

我嘗試的解決方案是建立一個自我調用腳本，我可以追加到身體，所以當Widget內容加載它可以添加必要的樣式標籤到頁面頭部

這裏是我的代碼。

var stylesheet = 'body{background-color:yellow}'; 

var styleScript = "<scrip" + "t>(function(){var style = document.createElement('style');style.type = 'text/css';if (style.styleSheet) { style.styleSheet.cssText = '" + stylesheet + "';} else {style.innerHTML = '" + stylesheet + "';} document.getElementsByTagName('head')[0].appendChild(style);console.log(style);}());</sc"+"ript>"; 

console.log(styleScript); 

document.body.innerHTML = styleScript; 

jsfiddle

Answer 1

var css = 'p { background: blue; }'; 
var style = document.createElement('style'); 
style.textContent = css; 
document.head.appendChild(style); 

Live demo (click).