javascript - 使按钮的宽度与高度相同

Question

我的网站顶部有一个工具栏，它是一个固定 div。在那里我有另一个 div，里面有一些按钮:

|somethingsomething.com                                       |
---------------------------------------------------------------
|statusBar____________________________________________|buttons|
|rest of website                                              |

HTML:

<div class="statusBar">
    <div class="statusBarMenuButtons">
        <form class="homeButtonForm" action="?id=1" method="post"><button class="homeButton"></button></form>
        <form class="subscriptionsButtonForm" action="?id=2" method="post"><button class="subscriptionsButton"></button></form>
        <form class="searchButtonForm" action="?id=3" method="post"><button class="searchButton"></button></form>                   
    </div>
</div>

CSS:

div.statusBar{  
    position:fixed;
    top:0;
    width:100%;
    height:5%;
}

button{
    height:100%;
    margin-right:10px;
}

form{
    height:100%;
}

/* This is the same for all buttons, just different background-images */
button.homeButton{
    background:url(../resources/homeButton.png) no-repeat;
    background-size:auto 100%; /* width height */
}

现在，我的问题是我无法知道按钮将达到哪个高度，因此无法知道应该指定哪个宽度。

我在这个网站和 Google 上进行了很多搜索，找到了很多关于 div 的答案，我还发现了这个 jQuery:

<script type="text/javascript">
    var height = $('button.homeButton').height();
    $('button.homeButton').css({
        'width' : height + 'px';
    });
</script>

但是好像不行。我已经提取了这个片段形式here并认为问题可能是我使用的是按钮而不是 div。

非常感谢您的帮助。

Answer 1

试试这个 Fiddle这个Fiddle是您想要的类(class)

var height = $('button.homeButton').height();
$('button').width(height);

div.statusBar {
    top:0;
    width:100%;
    height:5%;
}
button {
    height:100px;
    margin-right:10px;
}
form {
    height:100%;
}
/* This is the same for all buttons, just different background-images */
 button.homeButton {
    background:url(../resources/homeButton.png) no-repeat;
    background-size:auto 100%;
    /* width height */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="statusBar">
    <div class="statusBarMenuButtons">
        <form class="homeButtonForm" action="?id=1" method="post">
            <button class="homeButton"></button>
        </form>
        <form class="subscriptionsButtonForm" action="?id=2" method="post">
            <button class="subscriptionsButton"></button>
        </form>
        <form class="searchButtonForm" action="?id=3" method="post">
            <button class="searchButton"></button>
        </form>
    </div>
</div>