0

「mainImage」にマージンを動的に挿入する方法を見つけようとしています。私がやろうとしているのは、動的な高さと幅 (および動的なクライアント ビューポート) を持つ画像を垂直方向に中央揃えすることです。JavaScriptからロードされているため、画像にマージンを追加する方法がわかりません...

私は次のHTMLを持っています:

<div id="content">
    <img id="left" onclick="prevImage('images/52/image_','mainImage',52)" src="icons/arrow_left.png" />
    <img id="right" onclick="nextImage('images/52/image_','mainImage',52)" src="icons/arrow_right.png"/>
    <img id="mainImage" src="images/52/image_0.jpg" onload="addMargins()" />
</div>

次の CSS を使用します。

div#content{
    position: absolute;
    margin-left: 20%;
    margin-right: 5%;
    width: 75%;
    height: 95%;
    text-align: center;
}

div#content img#left{
    position: absolute;
    left: 0;
    top: 50%;
}

div#content img#right{
    position: absolute;
    right: 0;
    top: 50%;
}

div#content img#mainImage{
    max-height: 100%;
    max-width: 95%;
}

そしてJavaScript：

var key = 1;

function nextImage(thePath, id, max)
{
    if(key == max)
    {
        key = 1;
    }else{
        key++;
    }
    var image = thePath + key + ".jpg";
    document.getElementById(id).src= image;
};

function prevImage(thePath, id, max)
{
    if(key == 1)
    {
        key = max;
    }else{
        key--;
    }
    var image = thePath + key + ".jpg";
    document.getElementById(id).src= image;
};

だから私の考えは、基本的に言うJavaScriptで何かをすることでした:

"var viewport= viewport.height;
var mainImage= mainImage.height;
set marginTop to (viewport-mainImage)/2;
set marginBottom to (viewport-mainImage/2;"

「次/前」ボタンを介して読み込まれる画像ごとにそれを行います。

4

1 に答える 1

0

これが最善の方法だとは言いません。インラインで行うのではなく、css で 'em's を使用してマージンを設定する方法を検討することをお勧めします。em は、マージンが含まれている要素のサイズに相対的であることを保証します。

ただし、このようにしたい場合は、正しい軌道に乗っています。画像への参照を取得してから、スタイルの marginTop プロパティを設定する必要があります。

 var elem = document.getElementById(id); //reference to image
 elem.style.marginTop = (viewport-mainImage)/2;
 elem.style.marginBottom = (viewport-mainImage)/2;

あなたの画像がすでに高さを持っているかどうかは 100% 確信が持てないので、うまくいくかどうか教えてください。そうでない場合は、時間があるときに確認します。ハッピーコーディング。

于 2012-07-03T06:00:27.607 に答える