이 함수를 Javascript에서 jQuery로 변환합니다.

이 함수를 jQuery로 변경하려고 계속 시도했지만 올바르게 실행하지 못했습니다. 아무도 나에게 어떤 도움도 전혀주지 못했습니까?이 함수를 Javascript에서 jQuery로 변환합니다.

window.onresize = resizeImage; 

function resizeImage(){ 
    var newHeight = document.documentElement.clientHeight; 
    var newWidth = document.documentElement.clientWidth; 
    document.getElementById('crofthouse').width = (newHeight/2) * 1.33; 
    document.getElementById('crofthouse').height = (newHeight/2); 
    document.getElementById('main').style.width = (newHeight/2) * 1.33; 
    document.getElementById('main').style.height = (newHeight/2); 

    var margin = (newHeight - document.getElementById('crofthouse').height)/2; 
    document.getElementById('main').style.margin = margin + ',auto,' + margin + ',auto'; 
}

여기로 변환하려고 시도한이다 window.onresize = resizeImage;

function resizeImage(){ 
var newHeight = document.documentElement.clientHeight; 
var newWidth = document.documentElement.clientWidth; 

$("#crofthouse").css("width, (newHeight /2) * 1.33") 
$("#crofthouse").css("hegiht, (newHeight /2)") 
$("#main").css("width, (newHeight /2) * 1.33") 
$("#main").css("height, (newHeight /2)") 


var margin = (newHeight - $('#crofthouse').css("height)/2"); 
$('main').css("margin = margin + ',auto,' + margin + ',auto'"); 

}

출처

2011-10-30 Anonymous

document.getElementById ("sth")는 첫 번째 변경 인 $ ("# sth")로 바꿀 수 있습니다. 제대로 작동하지 않는다는 것은 무엇을 의미합니까? – lc2817

가장 좋은 시도는 무엇입니까 (질문에 게시)? –

CSS는 JavaScript를 "이해하지 못합니다". 'document.getElementById ('crofthouse'). width = ...'는'$ ("# crofthouse") .css ("width", (newHeight/2) * 1.33)'로 가야한다. 견적 배치에 유의하십시오. 또한 mutli-CSS 선택기 또는 체인을 사용하거나 변수를 사용하여 매번 jQuery (선택기 다시 강조 표시)를 다시 작성하지 않도록하십시오. 'var house = $ (# "crofthouse"); ... house.css (...)'. 그것도'$ ("main")' –

정상적으로 작동합니다.

$(window).resize(function(){ 
    var docEl = document.documentElement; 
    var newHeight = docEl.clientHeight; 
    var newWidth = docEl.clientWidth; 
    $('#crofthouse').width((newHeight/2) * 1.33); 
    $('#crofthouse').height((newHeight/2)); 
    $('#main').css({ 
     width: (newHeight/2) * 1.33, 
     height: newHeight/2 
    ); 

    var margin = newHeight - (($('#crofthouse').height())/2); 
    $('#main').css('margin', margin + ', auto, ' + margin + ', auto'); 
};

출처

2011-10-30 22:18:15 Fatih

저는 왜 JavaScript를 jQuery로 변환하려고하는지 궁금합니다. 항상 네이티브보다 느립니다. – Fatih

예.하지만 크로스 브라우저에서 작동하지 않을 수 있습니다. 이와 같은 간단한 작업에도 jQuery를 사용하면 얻을 수있는 가장 큰 장점 중 하나는 JS 전문가 팀이 서로 다른 브라우저에서 모든 작업을 원활하게 처리 할 수 있다는 것입니다. 그리고 대부분의 jQuery 함수는 네이티브 JS 함수가 존재할 경우 최대한 빨리 위임합니다. – GregL

이 그것을해야 ..

$(window).resize(function(){ 
    var doc = $(document), 
     croft = $('#crofthouse'), 
     main = $('#main'), 
     height = doc.height(), 
     margin = croft.height()/2; 


    croft.add(main).css({ 
      width:(height/2) * 1.33, 
      height:(height/2) 
    }); 
    main.css({ margin: margin + 'px auto' }); 
});

출처

2011-10-30 22:24:42

나는 이것을 시도하고 그것은 결코 작동하지 않는다. 나는 나의 window.onresize = resizeImage를 바꿀 필요가있다; –

@user,이 코드는 질문에 게시 된 코드 전체를 대체해야합니다 .. 함수와 이벤트 바인딩 모두 (* 모든 것을 수행합니다 *) –

@user, 오류가있었습니다 .. 'newHeight' should should '높이'가 되라. –

window.onresize = resizeImage; 

function resizeImage(){ 
    var newHeight = document.documentElement.clientHeight; 
    var newWidth = document.documentElement.clientWidth; 
    var croftHouse = document.getElementById('crofthouse'); 
    croftHouse.height = (newHeight/2) * 1.33; 
    croftHouse.width = (newWidth/2); 
    var main = document.getElementById('main'); 
    main.style.width = (newHeight/2) * 1.33; 
    main.style.height = (newHeight/2); 

    var margin = (newHeight - croftHouse.height)/2; 
    main.style.margin = margin + ',auto,' + margin + ',auto'; 
}

또는 정말가 JQuery와 접근 방식을 원하는 경우;

$(window).resize(resizeImage); 
    function resizeImage(){ 
     var newHeight = document.documentElement.clientHeight; 
     var newWidth = document.documentElement.clientWidth; 
     var croftHouse = document.getElementById('crofthouse'); 
     croftHouse.height = (newHeight/2) * 1.33; 
     croftHouse.width = (newWidth/2); 
     var main = document.getElementById('main'); 
     main.style.width = (newHeight/2) * 1.33; 
     main.style.height = (newHeight/2); 

     var margin = (newHeight - croftHouse.height)/2; 
     main.style.margin = margin + ',auto,' + margin + ',auto'; 
    }

내가 croftHouse.height이 무엇 확실하지 않다 레코드가 .. 당신이 croftHouse.style.height을 의미 않았다위한

출처

2011-10-30 23:34:51 rlemon

@rlemon .. 어쩌면'crofthouse'는''.. –

이 함수를 Javascript에서 jQuery로 변환합니다.

답변

관련 문제