javascript - 如何更改外部样式表的CSS规则

标签 javascript html css

<分区>

Possible Duplicate:
How to change/remove CSS classes definitions at runtime?

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

我的HTML.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}

我的JS.js

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

我要执行操作:

firstRule.style.color = "red" ;

最佳答案

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

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

< 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 给出的第一个答案

关于javascript - 如何更改外部样式表的CSS规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11499048/

相关文章:

javascript - 当通过 JavaScript 填充源时,Html5 音频不会在 safari 中播放

css - 需要为 html5 注释 Canvas 应用程序制作固定间距字体的建议

css - 尺寸和分辨率

javascript - 使 SVG 图形在进入窗口时播放(滚动)

html - 当里面有很多文字时,在 textarea 中打字 super 慢

javascript - 内存中的数据存储 - Javascript

javascript - firebase 嵌套对象返回 null - javascript

javascript - 不同按钮 ID 的逻辑相同

HTML Bootstrap 表单字段对齐

html - 如何使用 CSS 为导航中的每个 child 应用不同的颜色