HTML body 中的 Javascript 可以操作 head 元素吗？答案

【问题标题】：Can Javascript in the HTML body manipulate the head element?HTML body 中的 Javascript 可以操作 head 元素吗？
【发布时间】：2014-01-28 20:17:16
【问题描述】：

我在后端编写了一个小部件，允许您通过 OAuth2 / Google Picker UI 从您的 Google Drive 帐户中选择一个文件

由于小部件是在网页正文的前端呈现的，我不能包含style标签，需要动态添加到头部。

我尝试的解决方案是构建一个可以附加到正文的自调用脚本，因此当加载小部件内容时，它可以将必要的样式标签添加到页面头部

这是我的代码。

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

【问题讨论】：

标签： javascript css

【解决方案1】：

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

Live demo (click).

【讨论】：

我无法生成样式表，因为我正在使用 javascript API 来检索 Google 文档的 CSS / HTML 并将其呈现到页面中。 JS 无法创建文件。
@Luke 我不知道你在问什么。你问你是否可以操纵头部。是的...
如果我将样式标签放在正文中，则验证失败。
@Luke 我的新答案是你要找的吗？
做了一场噩梦，谷歌导出的 CSS 样式使用混合的单引号和双引号，快速正则表达式替换并且它正在工作。谢谢。