使用Javascript更改CSS背景颜色

Question

如标题所示，我正在尝试使用javascript函数更改css的背景颜色。 为了简化问题，我在此处编写了新代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Potato</title>

<style>
#item {
    background-color:blue;
    color:red;
}
</style>

<script type="text/javascript">
    function changeBG(id,color) {
        var id = id;
        var color = color;

        document.getElementById(id).style.background-color = color;
    }
</script>
</head>

<body>
<script type="text/javascript">changeBG(item,green)</script>
<div id="item">I am a potato</div>
</body>
</html>

默认的背景颜色是红色（如CSS所建议），然后我想在打印之前将其更改为绿色。 但是代码不起作用。 我不知道错误在哪里。

Answer 1

一是item必须首先作出：

<div id="item">I am a potato</div>
<script>
     //...stuff....
</script>

然后我们需要使用字符串：

changeBG("item","green")

最后，在JavaScript中，我们说backgroundColor而不是background-color 。

Answer 2

@media print {
   #item {
    background-color:green;
   }
}

将此包含在您的CSS中。 这将解决打印时的问题。

Answer 3

javascript中的所有css属性都是驼峰式的，而不是脊柱式的

document.getElementById('youElement').style.backgroundColor = 'color';

Answer 4

使用jQuery

$("#item").css("background-color", "green");

文献资料

或纯JavaScript

document.getElementById("item").style.backgroundColor = "green";

文献资料

使用Javascript更改CSS背景颜色

问题描述

4 个解决方案

解决方案1
1 已采纳 2014-10-08 05:05:01

解决方案2
1 2014-10-08 05:05:33

解决方案3
0 2014-10-08 05:05:09

解决方案4
0 2014-10-08 05:05:34

使用Javascript更改CSS背景颜色

问题描述

4 个解决方案

解决方案1 1 已采纳 2014-10-08 05:05:01

解决方案2 1 2014-10-08 05:05:33

解决方案3 0 2014-10-08 05:05:09

解决方案4 0 2014-10-08 05:05:34

解决方案1
1 已采纳 2014-10-08 05:05:01

解决方案2
1 2014-10-08 05:05:33

解决方案3
0 2014-10-08 05:05:09

解决方案4
0 2014-10-08 05:05:34