この関数を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を使用する最大の利点の1つは、JSのエキスパートからなるチームが、さまざまなブラウザ間でシームレスにすべてを動作させることです。また、ほとんどのjQuery関数は、ネイティブJS関数が存在する場合はできるだけ早くネイティブ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 '身長 'であること –

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に変換する

答えて

関連する問題