CSS가 완전히로드 된 후 Javascript가 실행됩니다.

Question

로드되는 CSS에 따라 일부 코드가 있습니다. 나는 내가 $(window).ready 시도 $(document).ready

$(document).ready(function() { 
    var bar_position, width; 
    bar_position = $('body').height() - 38; 
    width = $('body').width(); 
    console.log(bar_position); 
    if (width <= 480) { 
    console.log("Entered"); 
    $('#accounts-bar').css("top", bar_position); 
    } 
}); 

, $(window).load와 자바 스크립트를 시도 바닥 글

에서 자바 스크립트를로드하기 전에
나는 헤더에 CSS를로드,하지만 모두 실패합니다.

Answer 1

JavaScript comments은 //

잘못하지 # 있습니다

bar_position = $('body').height() - 38 #38 is the size of the bar 

바로

bar_position = $('body').height() - 38 //38 is the size of the bar 

그리고 다른 오류의 무리 그 코드가 실행되지 않을 것이다있다 . 당신이 태그를 놓친하고 블록 범위와 모든 것을 중괄호/폐쇄 누락 들여 쓰기 때문에이 순수 자바 스크립트없는 추측.

Answer 2

님의 코드는 정말 (당신이 커피 스크립트를 사용하지 않는 경우.) 엉망이 그것이 있어야 무엇 : CSS와

$(function() { 
    bar_position = $('body').height() - 38; //38 is the size of the bar 
    width = $('body').width(); 
    console.log(bar_position); 
    if (width <= 480) { //480 is the mobile width 
     console.log("Entered"); 
     $('#accounts-bar').css("top", bar_position); 
    } 
}); 

Answer 3

는 헤더에로드되는, JS가 바닥 글 및 문서에 싸여 JS 코드가 실행되기 전에 CSS가 적용되는 한 괜찮습니다. 나는 당신의 요소가 더 폭이없는 이유는 그것이 display: none;, 또는 그 라인을 따라 요소, 또는 무언가를 떠에만 포함되어 있다는 것입니다 같은데요. 다른 말로하면 - 저는 이것이 JS 문제가 아니라 CSS 문제라고 생각합니다. Firebug/Chrome 콘솔로 가서 문제의 요소를 선택하고 너비를 확인해보세요.

Answer 4

ready event는 충분합니다.

CSS 스타일 속성의 값에 의존하는 스크립트를 사용하여

, 는 스크립트를 참조하기 전에 외부 스타일 시트 또는 내장 스타일 요소를 참조하는 것이 중요합니다. (화상의 측정이 필요한 경우)

코드로드 자산에 의존하는 경우

는 코드 대신로드 이벤트의 핸들러에 배치되어야한다.

또한, 자바 스크립트가 유효하지 않습니다.

이 자바 스크립트를해야하는데 경우

$(document).ready -> 
    bar_position = $('body').height() - 38 #38 is the size of the bar 
    width = $('body').width() 
    console.log(bar_position) 
    if (width <= 480) #480 is the mobile width 
    console.log("Entered"); 
    $('#accounts-bar').css("top", bar_position) 
    return 

, 더 많은 문제가 :

$(document).ready(function(){ 
    bar_position = $('body').height() - 38; //38 is the size of the bar 
    width = $('body').width(); 
    console.log(bar_position); 
    if (width <= 480) //480 is the mobile width { 
     console.log("Entered"); 
     $('#accounts-bar').css("top", bar_position); 
    } 
});