如何使用javascript更改div內容

Question

這看起來很簡單，但我不知道我在做什么。 我有2個單選按鈕，根據選擇哪一個，div的內容會發生變化。 現在我在父div中有2個div但它只隱藏一個div並顯示另一個div。 如果即使它們看不見也沒有占用空間，這也不錯。

HTML：

<div>
    <form role="form">
        <div>
            <div class="radio" id="radioSelection" onchange="chooseDiv()">
                <label>
                    <input type="radio" name="optradio" id="selectionDiv1" checked />Choose Div1
                </label>
                <label>
                    <input type="radio" name="optradio" id="selectionDiv2" />Choose Div2
                </label>
            </div>
        </div>
    </form>
</div>

<div id="parentDiv">
    <div id="div1">You're Awesome!</div>
    <div id="div2">Everybody loves you!</div>
</div>

JavaScript的：

function chooseDiv() {
    if (document.getElementById("selectionDiv1").checked) {
        document.getElementById("div2").style.visibility = "hidden";
        document.getElementById("div1").style.visibility = "visible";
    } else {
        document.getElementById("div2").style.visibility = "visible";
        document.getElementById("div1").style.visibility = "hidden";
    }
}

所以我想擁有它，因此一次只能看到一個div，具體取決於選中哪個單選按鈕，並且當它們不在div中時不要占用空間。 謝謝！

Answer 1

如果您希望這些div停止占用空間，則必須使用display：none而不是visibility：hidden，將您的功能更改為

function chooseDiv() {
    if (document.getElementById("selectionDiv1").checked) {
        document.getElementById("div2").style.display = "none";
        document.getElementById("div1").style.display = "block";
    } else {
        document.getElementById("div2").style.display = "block";
        document.getElementById("div1").style.display = "none";
    }
}

工作plnkr： http ：//plnkr.co/edit/H4C9C7dAD324qJUgESMF？p = preview

Answer 2

visibility屬性將始終在隱藏時使用該空間。

更好的方法是使用display屬性。

像這樣的東西：

document.getElementById("div2").style.display= "none"; //similar to hidden
document.getElementById("div1").style.display= "block"; // visible

Answer 3

您正在使用visibility: hidden來隱藏div，隱藏它們但讓它們在瀏覽器中占用空間，嘗試使用display屬性，而不是使用hidden use none ，而不是使用visible use block 。

Answer 4

您必須首先了解display和visibility屬性之間的區別。

display - none - 當你display none ，意味着來自DOM的整個元素將隱藏其在DOM中的物理存在。因此，DOM中的該元素將沒有空間分配。

可見性 - 隱藏 - 在這種情況下，您只隱藏該元素，但物理上該元素存在於該空間中。因此，空間將分配該元素。

有關詳細信息，請按照此操作

Answer 5

只使用一個div並更改內容

DEMO

HTML

<body onload='chooseDiv();'>
<div>
    <form role="form">
        <div>
            <div class="radio" id="radioSelection" onchange="chooseDiv()">
                <label>
                    <input type="radio" name="optradio" id="selectionDiv1" checked />Choose Div1
                </label>
                <label>
                    <input type="radio" name="optradio" id="selectionDiv2" />Choose Div2
                </label>
            </div>
        </div>
    </form>
</div>

<div id="parentDiv">
    <div id="div1"></div>
</div>

<div style='display:none'>
    <div id='c1'><span>TEST 1</span><img src='http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png?v=hiFacebook'/></div>
     <div id='c2'><span>TEST 2</span><img src='http://zelcs.com/wp-content/uploads/2013/02/stackoverflow-logo-dumpster.jpg' /></div>
</div>

</body>

JS

   function chooseDiv() {
    var div = document.getElementById("div1");
    var msg =  document.getElementById("c1").innerHTML;

    if (!document.getElementById("selectionDiv1").checked) {
        msg = document.getElementById("c2").innerHTML;
    }

    div.innerHTML = msg;
}

如何使用javascript更改div內容

問題描述

5 個解決方案

解決方案1
3 已采納 2015-06-29 18:18:16

解決方案2
2 2015-06-29 18:20:22

解決方案3
1 2015-06-29 18:20:42

解決方案4
1 2015-06-29 18:28:16

解決方案5
1 2015-06-29 18:29:34

如何使用javascript更改div內容

問題描述

5 個解決方案

解決方案1 3 已采納 2015-06-29 18:18:16

解決方案2 2 2015-06-29 18:20:22

解決方案3 1 2015-06-29 18:20:42

解決方案4 1 2015-06-29 18:28:16

解決方案5 1 2015-06-29 18:29:34

解決方案1
3 已采納 2015-06-29 18:18:16

解決方案2
2 2015-06-29 18:20:22

解決方案3
1 2015-06-29 18:20:42

解決方案4
1 2015-06-29 18:28:16

解決方案5
1 2015-06-29 18:29:34