3

设想：

  1. 用户为 ButtonA 输入文本“thisisabutton”

  2. 用户为 ButtonB 输入文本“thisisalongerbutton”

  3. 两个按钮的大小都会动态调整以适应文本长度，从而使它们有两种不同的大小

  4. 我希望 ButtonA 与 ButtonB 大小相同（这将确定大小，因为它比 ButtonA 长）。

在 Javascript 中执行此操作的最佳方法是什么？

4

3 回答 3

1 
<button id="ButtonA" onChange="ResizeButtons();">Hello</button>
<button id="ButtonB" onChange="ResizeButtons();">Worlddddddddddddddd</button>
<script type="text/javascript">
    function getWidth(element) {
        return parseInt(window.getComputedStyle ? window.getComputedStyle(element,null).getPropertyValue("width")  : element.currentStyle.width );
    }
    function ResizeButtons() {
        var buttonA = document.getElementById("ButtonA");
        var buttonB = document.getElementById("ButtonB");
        buttonA.style.width = "auto";
        buttonB.style.width = "auto";
        var buttonAWidth = getWidth(buttonA);
        var buttonBWidth = getWidth(buttonB);
        var maxWidth = (buttonAWidth > buttonBWidth ? buttonAWidth: buttonBWidth) + "px";
        buttonA.style.width = maxWidth;
        buttonB.style.width = maxWidth;
    }
</script>

1）跨浏览器。

2) 在计算之前将元素重置为“自动”，否则在输入第一个字符后它们将永远不会调整大小。

buttonA3) 避免在获取and后重新访问 DOM buttonB。

4) 在修改每个按钮时检查。

编辑

您可能必须将ResizeButtons();事件放在用于更改按钮内容的输入上，或者更好的是，只需ResizeButtons()在内容更改后立即在当前脚本中运行更改按钮内容的函数。

于 2012-12-04T21:16:24.293 回答
0

虽然这个答案使用了 jQuery，但原理与上述答案相同，没有太多额外的麻烦来处理获得真正的元素宽度。我绝不是在提倡你必须使用 jQuery，但我认为它以更简洁的方式说明了解决方案。

  1. 用户通过提供新名称来添加新按钮。
  2. 计算最长按钮并重置较小按钮的宽度

编码：

<label for="buttonName">Enter Button Name:</label><input id="buttonName">
<button id="createButton">Create Button</button>
<div id="buttons"></div>

<script type="text/javascript">
$('#createButton').button().click(function(){
    var buttonName = $('#buttonName').val();
    $('#buttonName').val("");
    $('#buttons').append($('<button>'+buttonName+'</button>').button());

    var widestButton = 0;
    $('#buttons button').each(function(){
        widestButton = Math.max($(this).width(), widestButton);
    });
    $('#buttons button').width(function(){
        if ($(this).width() < widestButton)
            $(this).width(widestButton);                        
    });
});
</script>

http://jsfiddle.net/PwNUA

于 2012-12-04T21:51:34.137 回答
0 
    <button id="ButtonA">Hello</button>
    <button id="ButtonB" onChange="ResizeButtons();">Worlddddddddddddddd</button>
    <script type="text/javascript">
        function ResizeButtons()
        {
            var buttonAWidth = document.getElementById("ButtonA").style.width;
            var buttonBWidth = document.getElementById("ButtonB").style.width;
            var maxWidth = 0;
            if (buttonAWidth >= buttonBWidth){
                maxWidth = buttonAWidth;
            }
            else{
                maxWidth = buttonBWidth;
            }
            document.getElementById("ButtonA").style.width = maxWidth;
            document.getElementById("ButtonB").style.width = maxWidth;
        }
    </script>
于 2012-12-04T20:58:50.463 回答