js设置高度等于宽度，设置之后宽度会自动变？

Question

js设置高度等于宽度，设置之后宽度会自动变？

发布于
2016-07-10

更新于
2016-07-10

做一个正方形的div，宽度设置成80%，然后用js设置高度等于宽度，设置之后发现高度比宽度大一些
浏览器是chrome

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        #foo {
            width: 80%;
        }
    </style>
</head>
<body>
    <div id="foo"></div>
    <script>
        // 这样设置之后宽高如图
        var div = document.getElementById("foo");
        var width = div.offsetWidth;
        div.style.height = width+"px";
    </script>
</body>
</html>

宽度比高度小一点