Javascript框更改

我必須讓框執行以下操作：沿着頁面的左側有許多不同字體名稱的框。當您單擊這些框時，中間框中的文本字體會發生變化。在頁面的右側和底部進行相關更改的相似框組。Javascript框更改

這是編碼我到目前爲止：

<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/你可以試試這個。像你這樣的描述。 –

我已經做了jQuery的任務是更容易maintain.Used功能，從而獲得所需的數據，並操縱他們動態創建框。

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

Javascript框更改

回答

相關問題