0

当使用以下javascript函数检查复选框时，我正在尝试更改背景颜色：我可以更改正文的背景颜色，但不能更改表单（div）的背景颜色。请帮我修复它。

<html>
<head>
<title>Comment Form</title>
 <link rel="stylesheet" type="text/css" media="screen" href="form1.css" />
</head>
<body>
<form>
          <div class="box">
            <h1>Contact Form</h1>
            <label>
               <span>First Name</span><span class="req">*</span>
               <input type="text" class="input_text" name="name" id="FirstName"/>
            </label><br />
             <label>
               <span>Last Name</span><span class="req">*</span>
               <input type="text" class="input_text" name="LastName" id="LastName"/>
            </label><br />
            <label>
             <span>Address</span><span class="req">*</span>
               <input type="text" class="input_text" name="Address" id="Address"/>
            </label><br />
             <label>
                <span>City</span><span class="req">*</span>
                <input type="text" class="input_text" name="City" id="City"/>
            </label><br />
            <label>
             <span>State(XX)</span><span class="req">*</span>
               <input type="text" class="input_text" name="State" id="State"/>
            </label><br />
            <label>
             <span>Zipcode(XXXXXX)</span><span class="req">*</span>
               <input type="text" class="input_text" name="Zipcode" id="Zipcode"/>
            </label><br />
            <label>
                <span>Comment</span><span class="req">*</span>
                <textarea name="text" class="input_text"rows="5" cols="25" ></textarea>

            </label><br />
            <label>
            <span>I agree to the Following Condition</span> <input type="checkbox" id="condition" name="terms" value="condition"/>
            </label><br />

            <label>Make the background Green for Xmas!<input type="checkbox" id="color1" name="color1"  value="color1" onclick="changeBGC('green')"></label>      
         </div>
         <script>
         function changeBGC(color)
         { 
            alert("in the function");
            document.body.style.backgroundColor = color;
            div.style.backgroundColor = color;\\ NOT WORKING
           }
           </script>
    </form>
    </body>
    </html>

CSS 文件：

*{ margin:0; padding:0;}
body{ font:100% normal Arial, Helvetica, sans-serif; background:white;}
form,input,select,textarea{margin:0; padding:0; color:black;}

div.box{
margin:0 auto;
width:500px;
background:white;
position:relative;
border:none;
}

div.box h1 { 
color:red;
font-size:18px;
padding:5px 0 5px 5px;
border:none;

}

div.box label {
width:100%;
display: block;
background:white;
border:none;

padding:10px 0 10px 0;
}

div.box label span {
display: block;

font-size:15px;
float:left;
width:100px;
text-align:auto;
padding:0px 0px 0 0;
color:red;
}

div.box.input_text {
padding:10px 10px;
width:150px;
background:Black;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
}

div.box .message{
padding:7px 7px;
width:350px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
overflow:hidden;
height:150px;
}

div.box .button
{
margin:0 0 10px 0;
padding:4px 7px;
background:#CC0000;
border:0px;
position: relative;
top:10px;
left:382px;
width:100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left:1px double #FF0033;
border-right:1px double #FF0033;
}
4

1 回答 1

1

最好的选择是创建额外的类来改变你的 div 的颜色。

.diffrentColor {
    background-color: blue; /* for example blue or #00f*/ 
}

那么你可以做 document.getElementsByClassName('box')[0].className += " diffrentColor";

快速获胜：

document.getElementsByClassName('box')[0].style.backgroundColor = color;
于 2012-05-06T04:36:40.617 回答