JS не “видит” динамически подключаемый CSS-файл?

Question

[cratte]

Здравствуйте!

Есть HTML-файл, в head которого, с помощью скрипта, динамически подключается CSS-файл (чтобы "потешить" Google page speed). После этого скрипта подключаются остальные JS-библиотеки и скрипты. Если скрипт пытается получить стиль элемента, то выдаётся стиль браузера.

Пример:
Есть div с классом .test. В подключённом с помощью скрипта CSS-файле указана ширини блока .test (width=200px). Но если запросить ширину из скрипта то будет получена ширина по умолчанию 1920px (ширина окна браузера), как-будто файл со стилем не подключился.

Добавление стиля и подключение скриптов (в конце body)

<!-- Load CSS -->
<script>
function LoadFile(arrLibs){
var i,
ext,
file,
link;

for( i = 0; i < arrLibs.length; i++ ){
file = arrLibs[i];
link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", file);

document.getElementsByTagName("head")[0].appendChild(link)
console.log('1.'+i);
}
}

var arrLibs = [
'css/style.css'
];

LoadFile(arrLibs);
console.log('1');
</script>
<!-- Load CSS -->


<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.2.4.min.js"><\/script>')</script>
<!-- jQuery -->

<!-- JS Libs -->
<script src="js/libs.min.js"></script>
<!-- JS Libs -->

<!-- Custom js -->
<script src="js/main.js"></script>
<!-- Custom js -->

Если отложить выполнение скрипта, то всё работает нормально

$(function(){
      var interval = setTimeout(function(){
	    console.log( $('.test').width() );
      },200);
    });

Вопрос:
Как добавить CSS на страницу с помощью скрипта так, чтобы обращаться к нему из JS без костылей?

Answer 1

[Tom Nolane]

не вижу у вас ....
$(document).ready(function(){ .... });

или так:

$(document).ready(function() {
    $("head").append("<link rel='stylesheet' type='text/css' href='/styles.css' />");
})

п.с. походу у вас сначала загружается страница - потом уже подключается jquery...
п.с.с. без костылей:

<script type="text/javascript">
    var head = document.head
            , link = document.createElement('link');

    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.href = '{{ css_file }}';
    head.appendChild(link);
</script>