Javascript/CSS画像の高さ/幅/余白一度に反映されない計算

Question

私は画像ギャラリーアプリケーションを作成して、バニラのJavaScriptを練習しています。

私が取り組んでいる機能は、私のimageRollから私のmainImageへのスワップです。 スワップは正常に動作し、高さ/幅の計算もうまくいきますが、親要素と新しいイメージのマージンを計算するように指示すると、ソースイメージをもう一度クリックしなければ失敗します。

JSFiddle：限り、画像はギャラリーからクリックされたとして、それは後に毎回作品と同じレイアウト（横対縦向き）が、興味深いことに

function galleryToMainImg() { 
    var gNumList = this.parentNode.classList; 
    var gNum = gNumList[0].slice(1,2); 
    var imgId = "g" + gNum + "MainImage"; 
    var imgName = document.getElementById(imgId); 
    var height = this.offsetHeight; 
    var width = this.offsetWidth 
    var styles; 
    var ratio; 

    imgName.src = this.src; 

    if (height > width) { 
     ratio = (width/height) * 100; 
     styles = "height:100%; margin: 0px " + ((imgName.parentNode.offsetWidth - imgName.offsetWidth)/2) + "px;"; 

    } else if (width > height){ 
     ratio = (height/width) * 100; 
     styles = "width:100%; margin: " + ((imgName.parentNode.offsetHeight - imgName.offsetHeight)/2) + "px 0px;"; 
    } else { 
     ratio = 1; 
     styles = "width:100%; margin: " + ((imgName.parentNode.offsetHeight - imgName.offsetHeight)/2) + "px 0px;";   
    } 

    imgName.style = styles; 
} 

：https://jsfiddle.net/un64w9hh/2/

はここで機能コードです最初の1つ。しかし、レイアウトを切り替えると、毎回壊れてしまいます。

まずクリック：

<img id="g1MainImage" src="./images/image01.png" alt="Caption" style="height: 100%; margin: 0px;"> 

セカンドクリック：

<img id="g1MainImage" src="http://ne.fario.us/designs/ImageGallery/images/image01.png" alt="Caption" style="height: 100%; margin: 0px 9px;"> 

私は何が起こっているかわかりません。どんな助けでも大歓迎です。

Answer 1

私はしばらくあなたのコードで遊んでいますが、あなたの関数galleryToMainImg()はちょうど良い、比率と.offsetWidthプロパティはOKです。私はあなたの.cssからすべてのマージンのプロパティを削除し、エラーが続く。側の

残し計算は、これはちゃんと動作します（エラーがないが、私はまだの.cssによって適用余裕のプロパティがありません）：

function galleryToMainImg() { 
    gNumList = this.parentNode.classList; 
    gNum = gNumList[0].slice(1,2); 
    imgId = "g" + gNum + "MainImage"; 
    imgName = document.getElementById(imgId); 
    height = this.offsetHeight; 
    width = this.offsetWidth; 
    styles=''; 
    ratio=''; 

    imgName.src = this.src; 

    if (height > width) { 
     ratio = (width/height) * 100; 
     styles = 'height:100%; margin-left: 38%; margin-top: 0%'; /*+((imgName.parentNode.offsetWidth - imgName.offsetWidth)/2)*/ 

    } else if (width > height){ 
     ratio = (height/width) * 100; 
     styles = "width:100%; margin-left: 7%; margin-top: 0%";/*+ ((imgName.parentNode.offsetHeight - imgName.offsetHeight)/2) + "px;"*/ 

    } /*else { 
     ratio = 1; 
     styles = 'width:100%; margin: "' + ((imgName.parentNode.offsetHeight - imgName.offsetHeight)/2) + 'px;"';   
    }*/ 

    imgName.style = styles; 
} 

が、それは今後の検討のために便利です希望を。

Answer 2

クリック時に画像サイズが変更されるため、これは正常です。あなたのフィドルを更新してアラートを見ました。 hier jsfiddle.net/un64w9hh/4/