如何使用 jquery 而不是字符串将样式附加到任何页面的头部？答案

【问题标题】：How to append style into head of any page using jquery instead of string?如何使用 jquery 而不是字符串将样式附加到任何页面的头部？
【发布时间】：2018-04-10 11:28:23
【问题描述】：

我尝试使用这样的代码通过 Chrome 浏览器的控制台选项卡将样式附加到网页中。

$('head').append("<style>.hova {border-color: red !important;border-style: solid !important;border: 1px;}</style>");

问题是它像字符串一样在标题中附加（返回未定义），并带有 Google 或 StackOverFlow 等页面。
它适用于另一个页面，例如“http://jonraasch.com/blog/javascript-style-node”（返回页面标题）

【问题讨论】：

How to append a jQuery script to head tag的可能重复
并非每个页面都加载了 jQuery，在这种情况下，要么使用特定于浏览器的函数，要么使用以 $ 作为名称的不同定义函数。
How can I add a CSS class to a page <head> with jquery?的可能重复
还有一些页面，比如 Stack Overflow 或 JSFiddle 使用 iframe 来显示你的代码 sn-p，所以请注意你应该检查 iframe 头而不是页面。
如果你把它附加到每一页，为什么不把它放在你的样式表中呢？通过使用js，在js加载并运行之前不会应用这种样式

标签： javascript jquery

【解决方案1】：

如果你想对你访问的每个页面都这样做，你必须使用原生函数而不是 jQuery：

var style = document.createElement('style');
style.innerText = '.hova {border-color: red !important;border-style: solid !important;border: 1px;}';
document.head.appendChild(style);

【讨论】：

@Hitmands 可能是页面无法使用 jQuery 的部分
在这种情况下，我可能认为 textNode 或 innerText 比 innerHTML 更安全
@Hitmands，OP 正在尝试在他访问的随机页面上使用代码，如果未加载 jQuery，这是不可能的。
然后建议对问题进行更改，但始终坚持操作。
谢谢大家，这是正确的答案。问题是因为我使用带有“样式字符串”的附加。所以，有些页面知道它是一个字符串而不是元素

【解决方案2】：

$( "<style>body { background: black; }</style>" ).appendTo( "head" )

像这样使用 appendTo。

【讨论】：

它不像我的脚本那样工作，因为某些页面缺少 jquery。 Kevin Drost 的剧本是最好的答案。

【解决方案3】：

如果您希望您的样式被视为一个元素，您需要放入一个 HTML 元素对象。由于您只是输入一个字符串，因此它认为您正在执行诸如向<p> 元素添加文本之类的操作。相反，请尝试以下操作：

$("<style>.hova {border-color: red !important;border-style: solid !important;border: 1px;}</style>").appendTo("head");

【讨论】：

【解决方案4】：

你可以这样做，也可以添加多个 css 类

var h = document.getElementsByTagName('head').item(0);
var s = document.createElement("style");
s.type = "text/css"; 
s.appendChild(document.createTextNode(".hova {border-color: red !important;border-style: solid !important;border: 1px;}");
h.appendChild(s);

【讨论】：

@Hitmands 可能是页面无法使用 jQuery 的部分
在标题部分，jQuery 将不可用。

【解决方案5】：

你可以用这个：

$('head').css({
   'color' : 'red !important',
   'width' : '30px',
   'height' : '10px'
});

【讨论】：

假设 jQuery 可用并且您查看的页面是您更改的文档