javascript - why the width of elements are different after page load and after that moment? -

the situation want change size of element right after page load. problem element did not change because result returned function getsearchbarwidth negative number. strange here console prints incorrect values of width of 2 element web_logo , menu; width should small, in console, width of both elements equal parent element, navigation bar. later, print out again width of 2 element in console, result correct. can explain this?

update: seems because don't specify width of navigation bar. there other except specify width of parent element correct width of children right after page loads?

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

content of file js

// calculate width of window , relevant element function getsearchbarwidth(){     var wwidth = $(window).width();     var offset = 20; // distance between search bar , each of 2 next elements     var offset_1 = 15; // padding of each sides of navi bar     var searchbarwidth = wwidth - $("#navi_bar > .web_logo").width() - $("#navi_bar > .menu").width() - 2*offset - 2*offset_1;      return searchbarwidth; }  // change 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());     } 

my problem solved. call settimeout , width of element correct.