Question

我有一个按钮表，点击时将边框宽度从1px增加到3px。我查看了Javascript - Changing border-width without moving surrounding elements.，Don't affect positioning of other elements on border-width changes和How to add padding or border to a DIV and keep width and height?，但这些都没有帮助。我也尝试了盒子大小和轮廓属性，但都没有工作。我有这个Javascript：

function cur(curval) {
    if (!prevElement) {
      prevElement = document.getElementById(curval);
      currentElement = prevElement;
    } else {
      prevElement = currentElement;
      prevElement.style.borderWidth = "1px"
      currentElement = document.getElementById(curval);
    }
    currentElement.style.borderWidth = "3px"
    document.body.style.cursor = curval;
}

以下是表格的一部分：

<tr>
    <td><button id="default" onclick="cur('default')"><img 
    src="default.png"/></button></td>
    <td><button id="alias" onclick="cur('alias')"><img src="alais.png"/>
    </button></td>
    <td><button id="cell" onclick="cur('cell')"><img src="cell.png"/>
    </button></td>
    <td><button id="col-resize" onclick="cur('col-resize')"><img src="col-
    resize.png"/></button></td>
    <td><button id="copy" onclick="cur('copy')"><img src="copy.png"/>
    </button></td>
    <td><button id="crosshair" onclick="cur('crosshair')"><img 
    src="crosshairs.png"/></button></td>
</tr>

所有按钮都有border: 1px solid black，直到被点击为止。我怎么能这样做，所以边框宽度不会影响表格中的其他元素？

Answer 1

向表格单元格添加填充等于边框大小的差异。

因此，如果最大边框宽度为3px，则当未选中该按钮时，您的表格单元格应具有2px的填充，并且您的按钮的边框应为{{1 }}。选中该按钮后，表格单元格的填充应为1px，该按钮的边框应为0。

以这种方式，选择按钮时不会进行任何可见的更改。

更改边框宽度而不移动其他表格元素

1 个答案: