Question

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

HTML：

<button style="background:url(images/bg.png);" onclick="main()"><font color="#FFFFFF">Image</button>
<button style="background-color:#000;" onclick="main()"><font color="#FFFFFF">Black</button>
<button style="background-color:#030;" onclick="main()"><font color="#FFFFFF">Green</button>
<button style="background-color:#006;" onclick="main()"><font color="#FFFFFF">Blue</button>

的CSS：

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 24px;
    background:url(images/bg.png);
}

使用Javascript：

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

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

Answer 1

你可以做这样的事情

<button>Click me</button>

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

demo fiddle

Answer 2

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

您无法使用Javascript更改存储在服务器上的CSS文件。您需要调用服务器函数来执行此操作。您使用的是任何服务器技术（例如PHP或ASP.Net）吗？如果是这样，请单击服务器上的按钮单击调用该函数以在CSS文件中进行更改。

Answer 3

您可以使用三种方式使用CSS。

添加.css文件和
拥有<style>代码。
最后在元素中使用style属性;

当我们使用JavaScript操作元素的外观时，我们通常会更改style属性中的属性。但我们也可以更改<style>标记内的内容，但我不会建议这样做。但我们永远不能在.css文件中更改某些内容。即使<style>标记或style属性中的更改仅在DOM中发生。

因此无法使用JavaScript更改外部Css。但您确定可以更改style属性中的CSS。运行以下代码。打开Chrome Inspector并选择<body>标记。然后单击按钮，看看会发生什么。

document.getElementById('changeBg').addEventListener('click', function() {
  document.body.style = "background:red;"
})

body {
  background: blue;
}

button{
  margin:100px;
}

<body>
  <button id="changeBg">Click here to change Background</button>
</body>

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

3 个答案: