Javascript 使按钮宽度与高度相同

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

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

HTML:

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

我在这个网站和谷歌上搜索了很多，找到了很多关于div的答案，我还找到了这个jQuery：

但它似乎不起作用。我拉了这个片段表单，并认为问题可能是我使用的是按钮而不是div

非常感谢您的帮助。

试试这是您想要的课程

var height=$'button.homeButton'。高度； $‘按钮’。宽度和高度； 分区状态栏{ 排名：0； 宽度：100%； 身高：5%； } 钮扣{ 高度：100px； 右边距：10px； } 形式{ 身高：100%； } /*这对于所有按钮都是一样的，只是不同的背景图像*/ 按钮，主页按钮{ 背景：url../resources/homeButton.png不重复； 背景尺寸：自动100%； /*宽高*/ } 你不需要JS

div.statusBar将从子元素获取高度。如果窗体或按钮没有固定的高度，它将无法工作。使用高度：5%；从正文或html获取高度，可能未定义

尝试将固定高度添加到div.statusBar

div.statusBar {
   height: 60px;
}

另外，添加显示：块；单击按钮以正确应用宽度和高度属性。

结果：。更近了，还是6像素，有什么想法吗？编辑：如果你看橙色的正方形，看起来边距把它弄乱了。另一个编辑：发现问题，使用旧版本的jQuery。目前的成绩很好，谢谢！div.statusBar中5%的高度是为了确保即使在大屏幕或小屏幕上，状态栏的大小也是相同的。对于绝对尺寸，这将不起作用。

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 */
}

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

div.statusBar {
   height: 60px;
}