如何用 javascript 更改 div 内容

Question

这看起来很简单，但我不知道我到底在做什么。我有 2 个单选按钮，根据选择的是哪个，div 的内容会发生变化。现在我在父 div 中有 2 个 div，但它只会隐藏一个 div 并显示另一个。如果他们不占用 space 即使他们是隐形的，这也不是坏事。

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，具体取决于选中的单选按钮，并且不要让它们占用 space重新不在 div 中。谢谢！

Answer 1

如果你想让那些 div 停止占用 space，你必须使用 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";
    }
}

工作计划：http://plnkr.co/edit/H4C9C7dAD324qJUgESMF?p=preview

Answer 2

visibility 属性将在隐藏时始终使用 space。

更好的方法是使用 display 属性.

像这样：

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

Answer 3

您正在使用 visibility: hidden 来隐藏 div，这会隐藏它们但让它们在浏览器中显示 space，请尝试使用 display 属性，而不是使用 hidden 使用 none，而不是使用 visible 使用 block.

Answer 4

你必须首先了解 display 和 visibility 属性之间的区别。

显示 - none - 当你执行 display none 时，这意味着来自 DOM 的整个元素将隐藏在 DOM.So, DOM.

中的那个元素不会有 space 分配

可见性 - 隐藏 - 在这种情况下，您仅隐藏该元素，但实际上该元素存在于 space.So 中，space 将分配那个元素。

更多详情请关注this

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/Whosebug/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/Whosebug-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 内容

How to change div contents with javascript

html

javascript

function

onchange

radio-button