Question

我正在尝试通过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;

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

Answer 1

为什么有两个$(document).ready?？除非您是认真的，否则不要这样做。

尝试一下：

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”事件！

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

1 个答案: