如何监听元素宽度变化同步另一元素宽度？现有代码失效求助

原代码的问题点： #

• 普通DOM元素没有resize事件，你错误地把该事件绑定在了.footerA上，应该绑定到window对象。
• 代码里混用了中文引号（‘’、“”）和中文括号（（）），这些非英文符号会直接导致JS代码解析失败。
• 页面加载完成后没有初始化同步宽度，导致初始状态下footerB和footerA宽度不一致。

修正后的完整代码： #

HTML（修正中文引号）：

<div class="footerA"> aaaa </div>
<div class="footerB"></div>

CSS（可选，给元素加样式方便观察变化）：

.footerA {
    width: 80%; /* 设置随窗口变化的宽度，比如百分比 */
    border: 1px solid #ccc;
    padding: 10px;
}
.footerB {
    border: 1px solid #ff4444;
    margin-top: 10px;
    padding: 10px;
}

jQuery代码：

// 页面加载完成后先执行一次宽度同步
$(function() {
    // 初始化同步宽度
    syncFooterWidth();
    
    // 给window绑定resize事件，窗口缩放时同步宽度
    $(window).on('resize', syncFooterWidth);
});

// 封装同步宽度的函数，复用代码
function syncFooterWidth() {
    $('.footerB').css('width', $('.footerA').width());
}

补充说明： #

如果.footerA的宽度是由内部内容决定而非百分比，你可能需要加上box-sizing: border-box来确保宽度计算包含内边距和边框，避免宽度计算偏差：

.footerA, .footerB {
    box-sizing: border-box;
}

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