Why are obtained incorrect css values, if load css via script?

Why are obtained incorrect css values, if load css via script?

Hello everyone! I am creating a website. I need to measure the width of the element. If I connect through the link , then everything works fine. If I connect via a script, it returns an incorrect value. Everything is good in ie, Google chrome returns 1333, on this   example. In the example, the measured element el1   (elipse) . Code:

  1. function load_style() {
  2.     var window_width = $(window).width();
  3.     var window_height = $(window).height();
  4.     if (window_width > window_height) {
  5.         $("head").append($("<link rel='stylesheet' type='text/css' href='styles/style.css'>"));
  6.     } else {
  7.         $("head").append($("<link rel='stylesheet' type='text/css' href='styles/style_mobile.css'>"));
  8.     }
  9.     var text_page_1_width = $("#main").find(".page_1").find(".el1").width();
  10.     alert(text_page_1_width);
  11. }
  12. $(document).ready(function () {
  13.     load_style();
  14. });