使用html/javascript代码编辑外部CSS

如何更改放置在外部CSS文件中的内容的值？所以基本上我所有的页面都链接到一个css文件（它有所有页面的背景），我试图通过点击一个按钮来改变背景的值。。这是我的代码：

html:

Javascript:

<script type="text/javascript">
    function main(clicked){
        //Doesnt work
        document.styleSheets[0].cssRules[0].style.background="#00FF00";
    }
</script>

主功能（单击）{
//不起作用
document.styleSheets[0]。cssRules[0]。style.background=“#00FF00”；
}

---

如何通过单击按钮更改css中的背景？

您可以这样做

<button>Click me</button>

button = document.getElementsByTagName('button');
button[0].onclick = function() {
  document.body.style.background = "#00FF00";
}

点击我
button=document.getElementsByTagName（'button'）；
按钮[0]。onclick=function（）{
document.body.style.background=“#00FF00”；
}

---

如果我理解正确，您希望更改CSS文件本身的背景样式

---

不能使用Javascript更改存储在服务器上的CSS文件。您需要调用一个服务器函数来执行此操作。您是否使用任何服务器技术（如PHP或ASP.Net）？如果是这样，请在服务器上单击“调用函数”按钮以更改CSS文件。

您可以通过三种方式使用CSS

通过添加

.css

文件和

通过使用

标记

最后在元素中使用

style

属性 当我们使用JavaScript操纵元素的外观时，通常会更改

style

属性中的属性。但是我们也可以更改

标签中的内容，但我不建议这样做。但是我们永远无法更改

.css

文件中的某些内容。甚至

标记或

样式

属性中的更改也只在DOM中发生

因此，无法使用JavaScript更改外部Css。但您确实可以在

样式

属性中更改CSS。运行下面的代码。打开Chrome Inspector并选择标签。然后点击按钮，看看会发生什么

document.getElementById（'changeBg'）。addEventListener（'click'，function（）{
document.body.style=“背景：红色；”
})

正文{
背景：蓝色；
}
钮扣{
利润率：100像素；
}

单击此处更改背景

为什么不在元素上应用

css/css类

？调用

main（）

时您没有传递任何参数，但您正在接受一个参数。如何更改背景？启动此

document.body.style.background=“#FF0000”

@Rayon Oops我在将代码发布到此处之前对其进行了编辑，按钮有一个ID，按钮ID作为参数传递。不需要尝试

函数main（elem）{elem.style.background=“#00FF00”}

和

onclick=“main（this）”

或者如果你想对

主体应用
css
，请参考@SatejS..@user3926730发表的评论，使用
会话存储/localStorage/cookie
如何？重新加载页面后，
JS
应用的更改将丢失，对吗？
<script type="text/javascript">
    function main(clicked){
        //Doesnt work
        document.styleSheets[0].cssRules[0].style.background="#00FF00";
    }
</script>

<button>Click me</button>

button = document.getElementsByTagName('button');
button[0].onclick = function() {
  document.body.style.background = "#00FF00";
}