offsetWidth始终为0，无法设置div为正方形的技术求助

嘿，我懂你遇到的困扰了——想把div做成正方形，给width设了14%后打算用offsetWidth当height，结果这个值一直是0，试了好多办法都没搞定对吧？

问题出在这儿：你在把元素添加到DOM之前就去读取offsetWidth了。这时候元素还没被浏览器渲染，压根儿没法计算它的实际宽度，所以拿到的自然是0。

修复后的JS方案 #

只需要调整一下代码顺序，先把元素添加到body里，等浏览器完成渲染后再去获取offsetWidth，接着设置高度就行：

<body></body>

<script>
var elem = document.createElement('div');

elem.style.display = 'inline-block';
elem.style.backgroundColor = '#00B3FF';
elem.style.width = '14%';

// 先把元素挂载到DOM，让浏览器渲染它
document.body.appendChild(elem);

// 现在就能拿到正确的宽度值了
var actualWidth = elem.offsetWidth;
elem.style.height = actualWidth + 'px';
elem.innerText = actualWidth;
</script>

更省心的纯CSS方案 #

其实做响应式正方形根本不需要JS！利用CSS的padding-top特性：当padding值为百分比时，是基于父元素的宽度来计算的。用这个特性可以轻松实现正方形，还能适配各种屏幕尺寸：

<body>
  <div class="square">
    <span>我是正方形</span>
  </div>
</body>

<style>
.square {
  width: 14%;
  padding-top: 14%; /* 和宽度数值一致，形成正方形比例 */
  background-color: #00B3FF;
  display: inline-block;
  position: relative;
}

/* 如果要在正方形里放内容，用绝对定位让内容占满整个容器 */
.square span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

这种纯CSS的方法不用依赖JS，还能自动适应父元素宽度变化，响应式效果更稳定～

内容的提问来源于stack exchange，提问作者Codemaster United