2011-10-05 6 views
0

동적 인 요소를 만들고 외부 css 파일에서 css을 적용하고 jQuery으로 속성에 액세스하려고합니다. 그것은 Firefox에서 작동하지만 그것은 Chrome에 있지 않습니다.크롬 및 jquery CSS가 제대로 작동하지 않습니다.

CSS 파일 (myFile.css) :

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

다른 파일에 자바 스크립트 코드 (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

잘 작동합니다 (http://jsfiddle.net/nathan/jhky5/). Chrome은 귀하에게 무엇을 돌려 주나요? –

+0

나는 CSS 파일이 충분히 빨리 로딩되지 않는다고 생각한다. 나는 100ms의 지연으로 setTimeout을 사용하고 속성을 다시 얻으려고 노력한다. – gabitzish

답변

4

좋아, 나는 귀하의 의견을 기반으로 답변을 가지고 있습니다. 모든 jQuery 코드를 DOMReady 이벤트로 묶어야한다.

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

이 문서 객체 모델 (DOM)이이 실행되기 전에 완벽하게 준비가 될 것입니다 보장합니다.

당신이 코멘트에서 언급 한 100ms 지연은 스타일 시트가 항상 100ms로로드된다는 것을 모르기 때문에 좋은 생각이 아닙니다.

+0

음 ...하지만 이미 (문제가 있기 전에) ... – gabitzish

+0

그건 아주 이상합니다. DOM 준비 이벤트는 CSS가로드 될 때까지 실행되지 않아야합니다. 문제를 격리 할 수 ​​있습니까 (여전히 문제의 원인이되는 페이지의 가장 작은 하위 집합을 작성한 후)? –

관련 문제