자바 스크립트 함수를 사용하여 div의 배경색을 변경하는 방법

다음 javascript 함수를 사용하여 확인란을 선택하면 배경색을 변경하려고합니다. 본문의 배경색은 변경할 수 있지만 양식 (div)의 배경색은 변경할 수 없습니다. 제발 도와주세요.자바 스크립트 함수를 사용하여 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; 
}

출처

2012-05-06 Kishan s

가장 좋은 옵션은 DIV의 색상을 변경 추가로 클래스를 생성하는 것입니다.

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

은 다음 document.getElementsByClassName을 할 수있는 ('상자') [0] .ClassName과 + = "diffrentColor";

빠른 승리 :

document.getElementsByClassName('box')[0].style.backgroundColor = color;

출처

2012-05-06 04:36:40 demee

는 매력으로 일했다, 정말 고마워요 :) –

자바 스크립트 함수를 사용하여 div의 배경색을 변경하는 방법

답변

관련 문제