Question

情况是我想在页面加载后立即更改元素的大小。问题是元素没有改变，因为函数getSearchBarWidth返回的结果是负数。这里奇怪的是控制台打印的元素web_logo和menu的宽度值不正确;它们的宽度应该很小，但在控制台中，两个元素的宽度都等于父元素，即导航栏。但后来，我再次打印出控制台中两个元素的宽度，结果是正确的。有人可以解释一下吗？

更新：似乎是因为我没有指定导航栏的宽度。除了指定父元素的宽度以便在页面加载后立即获得其子元素的正确宽度之外，还有其他吗？

 <script src="js/function.js" defer></script>

文件内容js

// calculate the width of window and relevant element
function getSearchBarWidth(){
    var wWidth = $(window).width();
    var offset = 20; // distance between the search bar and each of the two next elements
    var offset_1 = 15; // padding of each sides of the navi bar
    var searchBarWidth = wWidth - $("#navi_bar > .web_logo").width() - $("#navi_bar > .menu").width() - 2*offset - 2*offset_1;

    return searchBarWidth;
}

// change the size of search bar
if($("#navi_bar > .search_bar").length > 0){
    console.log("window: "+ $(window).width());
    console.log("logo: "+ $("#navi_bar > .web_logo").width());
    console.log("menu: "+ $("#navi_bar > .menu").width());
    $("#navi_bar > .search_bar").css("width", getWindowWidth());    
}

Answer 1

我的问题解决了。只需调用setTimeout，然后元素的宽度就可以了。

为什么页面加载后和之后元素的宽度不同？

1 个答案: