未通过jQuery正确呈现元素的宽度

我试图通过jQuery获得HTML页面中元素

main

的宽度。我绝对不是jQuery方面的专家，我甚至不知道JavaScript和jQuery之间的区别，所以不要对我开枪。我相信我需要在jQuery中完成这项工作

我已经编写了一个函数来计算这个元素的宽度。我在加载文档和调整文档大小时运行它。当我调整页面大小时，它会正确呈现。但当它加载时，它是不正确的

这是因为当窗口大于1200px时，我有一个扩展菜单

我目前拥有以下jQuery代码：

jQuery(document).ready(function($) {

function articleResize() {
    if ( $("main").width() > 1200 ) {
        $("#artikel-met-sidebar").addClass('col-l-8');
    } else {
        $("#artikel-met-sidebar").removeClass('col-l-8');
    }

    var p = $( "main" );
    $( "#artikel-met-sidebar-sidebar" ).text(
      "outerWidth():" + $("main").outerWidth() +
      " , width():" + $("main").width() );
}

$(document).ready(articleResize);
window.onload = articleResize;
window.onresize = articleResize;

我尝试了很多不起作用的东西…

为什么有两个

$（文档）。准备好了吗？

？除非你是认真的，否则不要那样做

试试这个：

jQuery(document).ready(function($) {
    function articleResize() {
        if ( $("main").width() > 1200 ) {
            $("#artikel-met-sidebar").addClass('col-l-8');
        } else {
            $("#artikel-met-sidebar").removeClass('col-l-8');
        }

        var p = $( "main" );
        $( "#artikel-met-sidebar-sidebar" ).text(
          "outerWidth():" + $("main").outerWidth() +
          " , width():" + $("main").width() );
    }
    window.onresize = articleResize;
    articleResize();
}

---

请注意，当文档处于“就绪”状态时，“window.onload”事件将不会被触发

我不是在寻找一个类为

main

的元素，而是在标签

中添加一个fiddle（可以执行的代码）和HTML等。这没有什么区别，它仍然不正确。为什么？我在自己的网站上也尝试过类似的代码，效果不错@斯特夫