자바 스크립트가 바뀌는 것

나는 다음과 같은 박스를 얻어야한다 : 페이지의 왼편쪽에 다른 글꼴 이름의 상자가있다. 해당 상자를 클릭하면 가운데 상자의 텍스트 글꼴이 변경됩니다. 페이지의 오른쪽과 아래쪽에 관련된 변경 사항과 유사한 상자 세트를 수행하십시오.자바 스크립트가 바뀌는 것

<html> 
    <head> 
    <title>Boxes on Boxes on Boxes</title> 
    <style type="text/css"> 
#box_group1, #box_group2, #box_group3, #box_group4, #textbook { 
    position:absolute; 
    left:100px; 
    top:100px;  
} 
#box1, #box2, #box3, #box10, #box11, #box12 { 
    padding:5px; 
    width:50px; 
    height:50px; 
    float:left; 
} 
#box4, #box5, #box6, #box7, #box8, #box9 { 
    padding:5px; 
    width:50px; 
    height:50px; 
} 
#box1, #box4, #box7, #box10{ 
    background-color:orange; 
} 
#box2, #box5, #box8, #box11 { 
    background-color:blue; 
} 
#box3, #box6, #box9, #box12{ 
    background-color:green; 
} 
#textbook { 
    padding: 5px; 
    background-color:red; 
} 
    </style> 
    <script language="JavaScript"> 
     width=window.innerWidth; 
     height=window.innerHeight; 
    function boxes() { 
     document.getElementById("box_group1").style.left=(width-document.getElementById("box_group1").offsetWidth)/2; 
     document.getElementById("box_group2").style.top=(height-document.getElementById("box_group2").offsetHeight)/2; 
     document.getElementById("box_group3").style.left=width-100;100-document.getElementById("box_group3").offsetWidth; 
     document.getElementById("box_group3").style.top=(height-document.getElementById("box_group3").offsetHeight)/2; 
     document.getElementById("box_group4").style.left=(width-document.getElementById("box_group4").offsetWidth)/2; 
     document.getElementById("box_group4").style.top=height-100;100-document.getElementById("box_group4").offsetHeight; 
     document.getElementById("textbook").style.left=(width-document.getElementById("textbook").offsetWidth)/2; 
     document.getElementById("textbook").style.top=(height-document.getElementById("textbook").offsetHeight)/2; 
    } 
    </script> 
    </head> 
    <body onload="boxes()"> 
    <div id="box_group1"> 
     <div id="box1"> 
      First box 
     </div> 

     <div id="box2"> 
      Second box 
     </div> 

     <div id="box3"> 
      Third box 
     </div> 
    </div> 
    <div id="box_group2"> 
     <div id="box4"> 
      Fourth box 
     </div> 

     <div id="box5"> 
      Fifth box 
     </div> 

     <div id="box6"> 
      Sixth box 
     </div> 
    </div> 
    <div id="box_group3"> 
     <div id="box7"> 
      Seventh box 
     </div> 

     <div id="box8"> 
      Eighth box 
     </div> 

     <div id="box9"> 
      Ninth box 
     </div> 
    </div> 
    <div id="box_group4"> 
     <div id="box10"> 
      Tenth box 
     </div> 

     <div id="box11"> 
      Eleven box 
     </div> 

     <div id="box12"> 
      Twelve box 
     </div> 
    </div> 
    <div id="textbook">Textbook</div> 
    </body> 
</html>

출처

2013-10-27 user2916725

여기에 질문이 있습니까? –

클릭 한 다른 div 배경색으로 중간 상자의 배경색이 변경되거나 글꼴 만 변경됩니까? –

http://jsfiddle.net/codeSpy/27FHR/ 시도해 볼 수 있습니다. 당신 묘사 같은 것. –

내가 원하는 데이터를 얻을 수 maintain.Used 기능을 더 쉽게 동적으로 상자를 생성하도록 조작 jQuery로 작업을 수행했습니다

이

내가 지금까지 가지고있는 코드입니다.

HTML :

<div id="topDiv"></div> 

<div id="leftDiv"></div> 

<div id="rightDiv"></div> 

<div id="bottomDiv"></div>

CSS :

#topDiv div{ 
    float : left; 
    padding:5px; 
    width:50px; 
    height:50px; 
} 


#leftDiv div{ 
    float : left; 
    padding:5px; 
    width:50px; 
    height:50px; 
} 

#rightDiv div{ 
    float : right; 
    padding:5px; 
    width:50px; 
    height:50px; 
} 

#bottomDiv div{ 
    float : left; 
    padding:5px; 
    width:50px; 
    height:50px; 
} 

#topDiv{ 
    padding-left : 33%; 
} 
#leftDiv{ 
    padding-top : 30%; 
} 
#bottomDiv{ 
    padding-top : 68%; 
    padding-left : 33%; 
} 
#rightDiv{ 
    margin-top : -30%; 
} 

.changedFont{ 
    font-size : 20px; 
}

jQuery를 :

$(document).ready(function(){ 
//First declare an array of colors that will also indicate the number of boxes. 
var colorArray = new Array("red", "green", "blue"); 

//Execute a loop to create the boxes styling them properly 
for(var i = 1; i <= colorArray.length ; i++){ 
    $("#topDiv").append("<div id=Box" + i + "></div>"); 
    $("#Box"+ i).css("background-color", colorArray[i-1]); 
    $("#Box"+i).text("Box" + i); 

    $("#leftDiv").append("<div id=Box" + i+1 + "></div>"); 
    $("#Box"+ i+1).css("background-color", colorArray[i-1]); 
    $("#Box"+ i+1).text("Box" + i+1); 

    $("#rightDiv").append("<div id=Box" + i+2 + "></div>"); 
    $("#Box"+ i+2).css("background-color", colorArray[i-1]); 
    $("#Box"+ i+2).text("Box" + i+2); 

    $("#bottomDiv").append("<div id=Box" + i+3 + "></div>"); 
    $("#Box"+ i+3).css("background-color", colorArray[i-1]); 
    $("#Box"+i+3).text("Box" + i+3);  
} 

    //Define the handler for onclick events 
    $("#topDiv").children().click(function(){ 
     $("#topDiv").children().eq(1).css("background-color", $(this).css("background-color"));   
     $("#topDiv").children().eq(1).addClass("changedFont"); 
    }); 

    $("#leftDiv").children().click(function(){ 
     $("#leftDiv").children().eq(1).css("background-color", $(this).css("background-color")); 
     $("#leftDiv").children().eq(1).addClass("changedFont"); 
    }); 

    $("#rightDiv").children().click(function(){ 
     $("#rightDiv").children().eq(1).css("background-color", $(this).css("background-color")); 
     $("#rightDiv").children().eq(1).addClass("changedFont"); 
    }); 

    $("#bottomDiv").children().click(function(){ 
     $("#bottomDiv").children().eq(1).css("background-color", $(this).css("background-color")); 
     $("#bottomDiv").children().eq(1).addClass("changedFont"); 
    }); 
});

jsFiddle Demo

출처

2013-10-27 23:50:10

자바 스크립트가 바뀌는 것

답변

관련 문제