如何更改外部样式表的css规则

How to change css rules of external stylesheet

本文关键字：css 规则 外部样式表 何更改      更新时间：2023-09-26

可能重复：
如何在运行时更改/删除CSS类定义？

我有一个使用外部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" ;

您可以使用内部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 给出的第一个答案

您可以通过以下方式实现

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

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

相关文章：