javascript - 如何解决这个Cannot read property 'clientWidth' of null 错误？

Question

打开网站出现这个错误如何解决？

responsive-nav.js:2 Uncaught TypeError: Cannot read property 'clientWidth' of null

这个是这段js的代码

var ww = document.body.clientWidth;

$(document).ready(function() {
    $(".nav li a").each(function() {
        if ($(this).next().length > 0) {
            $(this).addClass("parent");
        };
    })
    
    $(".toggleMenu").click(function(e) {
        e.preventDefault();
        $(this).toggleClass("active");
        $(".nav").toggle();
    });
    adjustMenu();
})

$(window).bind('resize orientationchange', function() {
    ww = document.body.clientWidth;
    adjustMenu();
});


var adjustMenu = function() {
    if (ww < 800) {
        $(".toggleMenu").css("display", "inline-block");
        if (!$(".toggleMenu").hasClass("active")) {
            $(".nav").hide();
        } else {
            $(".nav").show();
        }
        $(".nav li").unbind('mouseenter mouseleave');
        $(".nav li a.parent").unbind('click').bind('click', function(e) {
            // must be attached to anchor element to prevent bubbling
            e.preventDefault();
            $(this).parent("li").toggleClass("hover");
        });
    } 
    else if (ww >= 800) {
        $(".toggleMenu").css("display", "none");
        $(".nav").show();
        $(".nav li").removeClass("hover");
        $(".nav li a").unbind('click');
        $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
             // must be attached to li so that mouseleave is not triggered when hover over submenu
             $(this).toggleClass('hover');
        });
    }
}

找到原因了！
原来是要在文档末尾添加脚本。原因是，你的文档宽度的开始是零，因为你的内容还没有加载，所以没有什么可显示，所以，你的宽度为零

Answer 1

这个异常的意思是对于null没有clientWidth这个属性，说明document.body这个是null，你可以尝试把这段js放在body后面运行，或者把所有的代码都放在$(document).ready(function(){})这里面。

Answer 2

看看你执行这个代码的时候元素创建了没有

Answer 3

var pageWidth = window.innerWidth,     pageHeight = window.innerHeight; if (typeof pageWidth != "number"){     if (document.compatMode == "CSS1Compat"){         pageWidth = document.documentElement.clientWidth;         pageHeight = document.documentElement.clientHeight;     } else {         pageWidth = document.body.clientWidth;         pageHeight = document.body.clientHeight;     } }