jQuery - 设置div宽度等于高度

Question

我有一个div，将始终填充100％的浏览器高度。现在我想将其宽度设置为相同的值（包括屏幕大小调整）。

HTML：

<main> 
    <div id="mainCircle"> 
    </div> 
</main> 

CSS：

body, html { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

main { 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

#mainCircle { 
    height: 100%; 
    border-radius: 50%; 
    background-color: gray; 
} 

JS：

$(document).ready(function() { 
    $('#mainCircle').width($('#mainCircle').height); 
    $(window).resize(function() { 
    $('#mainCircle').width($('#mainCircle').height); 
    }) 
}) 

如果我在价值传递为$('#mainCircle').width的数量 - 例如100像素，这将工作，但不是动态的。我究竟做错了什么？

Answer 1

在jQuery的height()是一个函数，而不是一个性质

$(document).ready(function() { 

    $(window).on('resize', function() { 
     $('#mainCircle').width($('#mainCircle').height()); 
    }).trigger('resize'); 

});