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 に答える