Chrome и jquery css не работают должным образом

#javascript #jquery #css #google-chrome

Вопрос:

Я пытаюсь создать динамический элемент, применить к нему некоторые css из внешнего css файла и получить доступ к свойствам с jQuery помощью . Он работает в Firefox, но не включен Chrome .

Вот пример :

Файл CSS (myFile.css):

 .myClass {
    width : 200px;
    font-family : Verdana;
    font-size : 12px;
}

код javascript в другом файле (myFile.js ):

 var title = $("<p/>").attr({id: "myId"}).addClass("myClass").appendTo(content);    
var titW = title.width();
var titFSize = parseInt(title.css("fontSize"));
var titFFamily = title.css("fontFamily");
console.log(titW, titFSize, titFFamily); // Firefox returns good values, Chrome does not

Есть идеи?
Спасибо!

1. Здесь все работает нормально: jsfiddle.net/nathan/jhky5 . Что возвращает Chrome для вас?

2. Я думаю, что файл css загружается недостаточно быстро… Если я использую setTimeout с задержкой в 100 мс и попытаюсь снова получить свойства, это сработает.

Ответ №1:

Хорошо, у меня есть ответ, основанный на вашем комментарии. Вам нужно вложить весь ваш код jQuery в событие DOMReady.

 jQuery(document).ready(function ($) {
    // jQuery code goes here
});

Это гарантирует, что объектная модель документа (DOM) будет полностью готова перед ее запуском.

Задержка в 100 мс, о которой вы упомянули в своем комментарии, не очень хорошая идея, потому что вы не знаете, что таблица стилей всегда будет загружаться через 100 мс.

1. Это очень странно. Событие DOM-ready не должно запускаться, пока не загрузится CSS. Можете ли вы изолировать проблему (написать наименьшее подмножество вашей страницы, которое все еще вызывает проблему), а затем поделиться им?