Fatal编程技术网
  • javascript/
  • 如何使用javascript更改div内容

如何使用javascript更改div内容

javascript html function

如何使用javascript更改div内容,javascript,html,function,radio-button,onchange,Javascript,Html,Function,Radio Button,Onchange,这看起来很简单，但我不知道我到底在做什么。我有两个单选按钮，根据选择的单选按钮，div的内容将发生变化。现在我在一个父div中有两个div，但它只会隐藏一个div并显示另一个div。如果它们不占用空间，即使它们是隐形的，这也不是坏事 HTML: 所以我想让它一次只能看到一个div，这取决于选中了哪个单选按钮，并且不要让它们在不在div中时占用空间。谢谢 如果希望这些div停止占用空间，则必须使用display:none而不是visibility:hidden，将函数更改为 function ch

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

HTML:

所以我想让它一次只能看到一个div，这取决于选中了哪个单选按钮，并且不要让它们在不在div中时占用空间。谢谢

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

可见性
属性将始终使用隐藏的空间

更好的方法是使用
display
属性

大概是这样的：

document.getElementById("div2").style.display= "none"; //similar to hidden
document.getElementById("div1").style.display= "block"; // visible
您正在使用
visibility:hidden
隐藏div，这会隐藏div，但让它们在浏览器中占据空间，请尝试使用属性，而不是使用
hidden
使用
none
，不要使用
visible
而是使用
block

您必须首先了解
显示
和
可见性
属性之间的区别

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

可见性-隐藏-在本例中，您仅隐藏该元素，但该元素实际存在于该空间中。因此，空间将分配给该元素

有关更多详细信息，请仅使用一个div跟随，并更改内容

HTML

你的答案非常棒，但在我的项目中，我实际上在每个div中都有图表，我只是使用文本使示例更容易理解。很好，你可以在innerHTML中设置html内容。ex:innerHTML='' 
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";
    }
}

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

<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>

   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;
}