在前端开发中，我们常常会遇到一些看似奇怪的问题，其中块级元素宽度默认 100% 时 JS 获取属性为空字符串就是一个较为常见的情况。了解其背后的原因，对于开发者准确获取元素信息、进行后续操作至关重要。

我们要明白块级元素的特性。块级元素在页面中会独占一行，并且宽度默认会扩展到父元素的宽度，也就是 100%。这是 CSS 布局的基本规则之一。

那么，为什么在这种情况下，使用 JS 获取元素的某些属性会得到空字符串呢？一个重要原因是加载顺序问题。当页面加载时，HTML 结构会首先被解析，然后是 CSS 样式的渲染，最后才是 JavaScript 代码的执行。如果在元素还没有完全渲染完成，尤其是其样式还未根据 CSS 规则应用时，就尝试使用 JS 获取相关属性，很可能得到不准确的结果，包括空字符串。例如，我们可能在文档的 DOMContentLoaded 事件触发之前就尝试获取元素宽度属性，此时元素的宽度属性可能还未被正确计算和设置。

另一个原因与 CSS 的特殊性有关。有些 CSS 属性是动态计算的，例如宽度基于百分比的情况。在某些情况下，浏览器可能需要一些时间来完成这些动态计算。当 JS 过早介入获取属性时，这些计算可能尚未完成，从而导致获取到空字符串。

如果元素的样式是通过 JavaScript 动态添加或修改的，在样式修改后没有给予浏览器足够的时间进行重排和重绘，也会出现获取属性为空字符串的现象。浏览器需要时间来重新计算元素的布局信息，只有在重排和重绘完成后，新的属性值才是准确可获取的。

要解决这个问题，我们可以通过合理设置代码执行顺序，确保在元素完全渲染且样式计算完成后再获取属性。例如，使用 DOMContentLoaded 或 load 事件来确保在文档和资源加载完毕后执行相关代码。在动态修改样式后，适当添加延迟或使用 requestAnimationFrame 方法，确保浏览器有足够时间完成重排和重绘，从而准确获取元素的属性值。