如何使實際盒子比其他盒子大？

Question

我是javascript新手，但遇到了問題。 我希望實際的（功能updateBoxes）框[boxIx]比其他框大，但我似乎找不到有效的代碼。 我已經嘗試過box [boxIx] .size =“ 100px”; box [boxIx] .style.size =“ 100px”; 沒有結果。 這是我的代碼；

function init() {

    box = document.getElementById("boxes").getElementsByTagName("div");
    for (var i=0; i<box.length; i++) {
        box[i].style.left = 70*i+"px";
    } // End for

    boxIx = box.length - 8;
    updateBoxes();
} // End init

function browseLeft() {
    if (boxIx > 0) boxIx = boxIx - 1;
    updateBoxes();
} 
// End browseLeft

function browseRight() {
    if (boxIx < box.length-1) boxIx = boxIx + 1;
    updateBoxes();}
 // End browseRight


**function updateBoxes() {

    box[boxIx].style.backgroundColor ="#CCC";
    box[boxIx].style.top = "20px";
    box[boxIx].style.zIndex = 9;**


    var z = 8;
    for (var i=boxIx-1; i>=0; i--) {
        box[i].style.backgroundColor ="#666";
        box[i].style.top = "0px";
        box[i].style.zIndex = z;
        z = z - 1;
    } // End for

    z = 8;
    for (var i=boxIx+1; i<box.length; i++) {
        box[i].style.backgroundColor = "#666";
        box[i].style.top = "0px";
        box[i].style.zIndex = z;
        z = z - 1;
    } // End for
} // End browseLeft

Answer 1

正如三十點指出的那樣，在示例代碼中有兩個“ **”實例，我假設這是編輯時的降價故障，因此我將其刪除。

您的示例僅顯示JavaScript代碼。 您正在使用的HTML標記和CSS樣式將最有幫助。 我創建了一個提琴供討論，並在此處為您解決： http ： //jsfiddle.net/bhofmann/zkZMD/

我注意到一些可能會有所幫助的事情：

1. 您在一些地方使用了8號魔術數字。 我們可以假設這是箱數嗎？ 我會將其存儲在變量中以供功能使用。
2. 您使用了很多直接樣式。 如果使用CSS類更改框的外觀，則代碼可能會更干凈。
3. 除非您更改DIV的默認樣式，否則只需設置左偏移量就不會有太大變化。

PS。 我可以自由地在頁面加載時調用init函數，因為我什么也看不到要調用它。 我不知道什么會調用browserLeft和BrowseRight，但我將留給您。