如何更改外部样式表的css规则[重复]答案

【问题标题】：How to change css rules of external stylesheet [duplicate]如何更改外部样式表的css规则[重复]
【发布时间】：2012-07-17 11:41:29
【问题描述】：

可能重复：
How to change/remove CSS classes definitions at runtime?

我有一个使用外部 css 文件的 HTML 页面。我想在运行时使用 javascript 更改外部文件的 css 规则。

myHtml.html

<html>
  <head>
    <link rel="stylesheet" href="myCSS.css" type="text/css">
    <script type="text/ecmascript" src="myJS.js" />
  </head>
  <body>
    <p> change css style color for this element using javascript </p>
  </body>
</html>

myCSS.css

.p{ color:blue}

myJS.js

var ss = document.styleSheets[0]
var firstRule = ss.rules[0] // null

我要执行操作：

firstRule.style.color = "red" ;

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以使用内部 css 覆盖外部 css 属性。它也可以通过三种不同的方式实现：

1) 在页面本身中声明您的 css 属性，例如根据您的代码包含“样式”标签并在其间写入属性

< html>

 < head>
   < link rel="stylesheet" href="myCSS.css" type="text/css">
   < script type="text/ecmascript" src="myJS.js" />
   <style type="text/css">
   ........................
   .........................
   </style>
< /head>
< p > change css style color for this element using javascript   
< /p>

< /html>

2) 使用内联css

< p style="font-color:red;"> change css style color for this element using javascript   
< /p>

3) 使用 javascript：这只是另一种方式，或者您可以说间接方式来实现内部 css 实现。请参阅@Misam 给出的第一个答案

【讨论】：

好的..谢谢。我测试过我可以通过定义新的css来覆盖外部css。

【解决方案2】：

您可以通过以下方式实现

var div = document.getElementById("newDiv");
div.style.position = "absolute"; 
div.style.top = "200px"; 
div.style.left = "200px";

同样，您可以编辑/添加更多 CSS 属性看看这是否有助于改变 CSS 规则：Alter CSS Rules

【讨论】：

先生，我知道我可以做到这一点，但我的要求是别的。我想知道是否可以更改外部样式表中定义的 css 规则。如果是，那么如何？
我已经在上面的答案中发布了一个链接，看看它是否有帮助
先生，我已经访问过该链接。如果 css 规则是内联写在同一个文档中，但如果样式表是使用链接元素嵌入的（如我在示例中提到的），我可以更改 css 规则然后我无法获得那里定义的 css 规则。当我尝试 document.styleSheets[0].rules 时它返回 null
好的..先生，我知道了..非常感谢。
不是指定问题的解决方案