如何使用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