Question

我有一个HTML格式的页面，我需要替换标记内的内容

<style type="text/css">
</style>

注入托管在同一域中的另一个 .css 文件的内容。

知道如何在javascript中做到这一点吗？

<html>
  <head>
    <style type="text/css">
      h1 {color:red;}
      p {color:blue;}
    </style>
  </head>

  <body>
    <h1>A heading</h1>
    <p>A paragraph.</p>
  </body>
</html>

Answer 1

为样式标记添加id属性。使用此挂钩可以使用Javascript更改样式标记的内容。

<强> HTML

<style id="myStyle" type="text/css">
h1 {color:red;}
p {color:blue;}
</style>

<h1>Something</h1>

<强>的Javascript

var elem = document.getElementById("myStyle");
elem.innerHTML = "h1{color:blue;}";

工作示例 http://jsfiddle.net/4xAHr/

Answer 2

如果您只想添加这些样式，则无需将内容注入style元素，只需将其他文件链接为样式表：

var link = document.createElement('link');
link.rel = "stylesheet";
link.href = "/path/to/the/file.css";
document.getElementsByTagName('style')[0].parentNode.appendChild(link);

这会将相关的样式“注入”到文档中。

Live Example using your markup | Source

如何更改<style type =“text / css”> </style>的内容

2 个答案: