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

Question

I have a page in HTML and I need to replace the content inside tag 我有一个HTML页面，我需要替换标签中的内容

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

injecting the content of another .css file hosted on the same domain. 注入同一域中托管的另一个.css文件的内容。

Any idea how to do it in javascript? 任何想法如何做到这一点的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

Add an id attribute to the style tag. 将id属性添加到样式标签。 Use this hook to change the contents of the style tag with Javascript. 使用此钩子可使用Javascript更改样式标签的内容。

HTML 的HTML

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

<h1>Something</h1>

Javascript Java脚本

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

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

Answer 2

If you just want to add those styles, you don't need to inject the content into the style element, just link that other file as a stylesheet: 如果只想添加这些样式，则无需将内容注入到style元素中，只需将该其他文件链接为样式表即可：

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

That will "inject" the relevant styles into the document. 这样会将相关样式“注入”到文档中。

Live Example using your markup | 使用标记的实时示例 Source 资源

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

问题描述

2 个解决方案

解决方案1
4 2013-03-11 09:32:04

解决方案2
2 已采纳 2013-03-11 09:30:35

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

问题描述

2 个解决方案

解决方案1 4 2013-03-11 09:32:04

解决方案2 2 已采纳 2013-03-11 09:30:35

解决方案1
4 2013-03-11 09:32:04

解决方案2
2 已采纳 2013-03-11 09:30:35