如何使用Javascript创建<style>标签?

Arend:

我正在寻找一种<style>使用JavaScript 标记插入HTML页面的方法。

到目前为止,我发现的最好方法是:

var divNode = document.createElement("div");
divNode.innerHTML = "<br><style>h1 { background: red; }</style>";
document.body.appendChild(divNode);

这在Firefox,Opera和Internet Explorer中有效,但在Google Chrome中不起作用。<br>IE的前面也有点难看

有人知道创建<style>标签的方法吗

  1. 更好

  2. 使用Chrome吗?

或许

  1. 这是我应该避免的非标准事情

  2. 三种运行良好的浏览器都很棒,到底谁在使用Chrome?

克里斯多夫:

尝试将style元素添加head而不是body

这已在IE(7-9),Firefox,Opera和Chrome中进行了测试:

var css = 'h1 { background: red; }',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

head.appendChild(style);

style.type = 'text/css';
if (style.styleSheet){
  // This is required for IE8 and below.
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用DOM删除<style>标签?

如何使用 Selenium 查找 HTML <style> 标签

<style>标签在<body>标签内如何工作?

如何仅使用 Javascript 获取 <style> 标签中定义的颜色属性值?

如何使用Javascript创建HTML标签?

Style Rails选择标签

<style> 标签中的变量?

如何在 vue 的组件中添加 if in style 标签

如何将媒体查询附加到<style>标签?

我如何解决关于 <style> 标签的验证错误

使用JavaScript创建SVG标签

使用 JAVASCRIPT 创建标签内容

获取 html 标签的 style 属性

如何使用JavaScript动态创建HTML标签(包含内容)?

如何使用 JavaScript 在多个标签内创建 iframe?

如何使用 javascript 广告代码创意创建大量标签

如何创建 JavaScript 标签以遍历 JavaScript 对象?

CSS按钮样式无法与vue.js一起使用<style>标签使用

如何在javascript中创建标签?

如何在 style='background-image' 标签中对来自 mysql 的图像进行编码

如何强制webpack将纯CSS代码放入HTML head的style标签中?

浏览器何时以及如何在<body>中呈现<style>标签?

在 PHP 中使用正则表达式查找 <head> 中的所有 <style> 标签

使用JavaScript在新标签元素内创建标签元素

如何在html5 <img>或<iframe>标签中使用内联CSS样式(style =“ vertical-alignment:middle;”)

<li> 标签内的项目符号如何使用 list-style-position: inside 具有边框顶部

JavaScript - 标签内的标签

如何创建标签网址

如何创建锚标签