js 순환 변경 div 색상 구체 적 방법

2925 단어 jsdiv색깔.
자 바스 크 립 트 를 사용 하 는 과정 에서 하나의 그룹 을 순환 적 으로 옮 겨 다 니 려 면 자주 사용 하 는 문법 은 두 가지 가 있다.

 for (var i; i < array.length; i++) {
     statement;
 }
 for (var i in array) {
     statement;
 }
이 두 가지 용법 은 같은 일 을 할 수 있 을 것 같 지만 실제로 두 순환 의 순환 횟수 는 일반적으로 다르다.원본 코드 는 다음 과 같다.

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 #button{text-align:center;}
 #outer{width:330px; height:100px; margin:10px auto;}
 #outer div{float:left;width:100px;height:100px;margin:0px 5px;background:black;}
 </style>

 <script>
 window.onload = function() {
     var obutton = document.getElementsByTagName("button")[0];
     var outer = document.getElementById("outer");
     var outerDiv = outer.getElementsByTagName("div");
     obutton.onclick = function() {
         for(var p in outerDiv) outerDiv[p].style.background = "red";
     };
 };

 </script>
 </head>
 <body>
 <div id="button">
 <button> </button>
 </div>
 <div id="outer">
     <div></div>
     <div></div>
     <div></div>
 </div>
 </body>
 </html>
이 코드 는 for-in 문 구 를 사용 하여 순환 하 였 는데 문제 가 없어 보 입 니 다.그러나 브 라 우 저 디 버 깅 을 할 때 오류 가 발생 합 니 다."Uncaught TypeError:Cannot set property'background'of undefined"왜 그 럴 까요?만약 우리 가 stament 의 내용 을 좀 고치 면 문 제 를 발견 할 수 있 을 것 이다. for(var p in outerDiv) alert(p);결과 출력 은 0,12 length item 이 므 로 property 가 length 와 item 을 가 져 왔 을 때 style 방법 을 사용 하려 고 시도 하면 당연히 undefined 입 니 다.수정 은 다음 과 같다.

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 #button{text-align:center;}
 #outer{width:330px; height:100px; margin:10px auto;}
 #outer div{float:left;width:100px;height:100px;margin:0px 5px;background:black;}
 </style>

 <script>
 window.onload = function() {
     var obutton = document.getElementsByTagName("button")[0];
     var outer = document.getElementById("outer");
     var outerDiv = outer.getElementsByTagName("div");
     obutton.onclick = function() {
         for (var i = 0; i < outerDiv.length; i++){
             outerDiv[i].style.background = "red";
         }
     };
 };

 </script>
 </head>
 <body>
 <div id="button">
 <button> </button>
 </div>
 <div id="outer">
     <div></div>
     <div></div>
     <div></div>
 </div>
 </body>
 </html>

좋은 웹페이지 즐겨찾기