如何使用 javascript 更改 div 内容答案

【问题标题】：How to change div contents with javascript如何使用 javascript 更改 div 内容
【发布时间】：2023-03-28 20:39:01
【问题描述】：

这看起来很简单，但我不知道我在做什么。我有 2 个单选按钮，根据选择哪个单选按钮，div 的内容会发生变化。现在我在父 div 中有 2 个 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 中时不要让它们占用空间。谢谢！

【问题讨论】：

标签： javascript html function radio-button onchange

【解决方案1】：

visibility 属性在隐藏时将始终使用该空间。

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

类似这样的：

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

【讨论】：

【解决方案2】：

仅使用一个 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;
}

【讨论】：

你的回答很棒，但在我的项目中，我实际上在每个 div 中都有图表，我只是使用文本使示例更易于理解
太好了，您可以在innerHTML 中设置html 内容。例如：innerHTML = '
'

【解决方案3】：

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

显示 - 无 - 当您执行 display none 时，这意味着 DOM 中的整个元素将在 DOM 中物理存在时隐藏起来。因此，在 DOM 中不会为该元素分配空间。

可见性 - 隐藏 - 在这种情况下，您仅隐藏该元素，但该元素实际上存在于该空间中。因此，空间将分配该元素。

更多详情请关注this

【讨论】：

【解决方案4】：

您正在使用 visibility: hidden 隐藏 div，这会隐藏它们但让它们在浏览器中占用空间，请尝试使用 display 属性，而不是使用 hidden 使用 none，而不是使用 @ 987654325@使用block。

【讨论】：

【解决方案5】：

如果您希望这些 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

【讨论】：