如何让实际的盒子比其他盒子大？

Question

我是 javascript 新手，遇到了问题。我希望实际的（函数 updateBoxes）框 [boxIx] 比其他框更大，但我似乎找不到有效的代码。我试过 box[boxIx].size ="100px";框[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 的默认样式，否则只需设置左侧偏移量就不会看到太多变化。

附言。我冒昧地在页面加载时调用 init 函数，因为我没有看到其他任何东西可以调用它。我不知道什么会调用 browserLeft 和 browserRight，但我将其留给您。