Chrome和jQuery的css無法正常工作

我試圖創建一個動態元素，從外部應用csscss文件，並使用jQuery訪問屬性。它適用於Firefox，但不適用於Chrome。Chrome和jQuery的css無法正常工作

下面是一個例子：

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

任何想法？謝謝！

來源

2011-10-05 gabitzish

在此處運行良好：http://jsfiddle.net/nathan/jhky5/。 Chrome爲您返回什麼？ –

我認爲css文件加載速度不夠快......如果我使用setTimeout延遲100ms，並嘗試再次獲取屬性，它就會起作用。 – gabitzish

好的，我已經根據您的評論得出了答案。您需要將所有jQuery代碼放在DOMReady事件中。

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

這可確保文檔對象模型（DOM）在運行前完全準備就緒。

您在評論中提到的100毫秒延遲不是一個好主意，因爲您不知道樣式表總是會在100毫秒內加載。

來源

2011-10-05 13:16:55

嗯...但我已經這樣做了（之前有問題）... – gabitzish

這很奇怪。在CSS加載之前，DOM準備好的事件不應該觸發。你能分離出這個問題嗎（寫下仍然導致問題的最小的頁面子集）然後分享它？ –

Chrome和jQuery的css無法正常工作

回答

相關問題