javascript - 同じ位置にdivを見つける

Question

JavaScriptを使用して非表示の画像を表示しようとしています。コードは正常に動作しますが、画像は別の場所に表示されます。今、私は同じ場所で画像を表示および非表示にしたいと考えています。

 <script type="text/javascript"> 
    function showImage()
    {

        if(document.getElementById('check').checked==true)
        {
            document.getElementById("image").style.visibility = 'visible'; 
            document.getElementById("images").style.visibility = 'hidden'; 
        }
        else if(document.getElementById('check').checked==false)
        {
            document.getElementById("image").style.visibility = 'hidden'; 
            document.getElementById("images").style.visibility = 'visible'; 
        }

    }
</script>
<body onload="showImage()">
    <font align="left">
    <input type="checkbox" id="check" onclick="showImage()" />
    Show Image

    <div class="checkboxes" id = "image" >
        <img  class = "jive-image" height="125" src ="Tulips.jpg ">
    </div>
    <div id="images">
        <img class = "jive-image" height="125" src="Desert.jpg">
    </div>
</body>

どのように可能ですか？

score 1 · Accepted Answer

を使用しているからですvisibility。CSS のvisibilityスタイルはページフローに影響しません。opacityを 0 に設定しているかのようです。代わりに、を使用することもできますdisplay。

function showImage() {
    if(document.getElementById('check').checked) {
        document.getElementById("image").style.display = 'block'; 
        document.getElementById("images").style.display = 'none'; 
    } else {
        document.getElementById("image").style.display = 'none'; 
        document.getElementById("images").style.display = 'block'; 
    }
};

score 1 · Accepted Answer

このdisplayスタイルを使用すると、のように非表示にするだけでなく、ページから画像を削除できますvisibility。これは、最初の画像がスペースを占有しなくなったため、下の画像が押し上げられたことを意味します。要素を表示および非表示にするには、に設定element.style.displayします。'block''none'

jsフィドル

function showImage() {
    if (document.getElementById('check').checked == true) {
        document.getElementById("image").style.display = 'block';
        document.getElementById("images").style.display = 'none';
    } else if (document.getElementById('check').checked == false) {
        document.getElementById("image").style.display = 'none';
        document.getElementById("images").style.display = 'block';
    }
}

score 0 · Accepted Answer

0

可視性を設定する代わりに、表示を none または block に設定します。

于 2013-03-30T15:27:35.920 に答える

javascript - 同じ位置にdivを見つける

3 に答える 3

Related

Reference