如何用javascript更改div內容

這看起來很簡單，但我不知道我在做什麼。我有2個單選按鈕，取決於哪一個被選中，div的內容會改變。現在我有一個父div內的2個div，但它會隱藏一個div並顯示另一個div。如果他們即使看不見，也不會佔用太多空間。如何用javascript更改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是一次明顯的，這取決於單選按鈕被選中，和唐」當他們不在分區時，不要讓他們佔用空間。謝謝！

來源

2015-06-29 Markus

如果你想這些div停止服用空間，你必須使用顯示：無，而不是知名度：隱藏，你的函數改爲

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

來源

2015-06-29 18:18:16 yvesmancera

非常感謝:) – Markus

不客氣，很高興它幫助你。 – yvesmancera

visibility屬性將始終每當它被隱藏時使用該空間。

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

事情是這樣的：

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

來源

2015-06-29 18:20:22 Varun

謝謝你的努力：D – Markus

您正在使用visibility: hidden隱藏的div，隱藏他們，但讓他們把空間瀏覽器，嘗試不使用hidden使用none代替display財產，以及而不是使用visible使用block。

來源

2015-06-29 18:20:42 maltray

非常感謝你:) – Markus

看看這個鏈接http://www.w3schools.com/css/css_display_visibility.asp。這清楚地解釋了能見度和顯示之間的差異。

來源

2015-06-29 18:24:24

感謝您的幫助:) – Markus

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

顯示 - 無 - 當你做display none這意味着從DOM整個元素會隱藏在DOM.So它的物理存在，就不會有對DOM該元素的空間分配。

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

的更多詳情，請按照this

來源

2015-06-29 18:28:16 Anshul

太棒了！我沒有定義，謝謝！ – Markus

只需一個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/[email protected]?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; 
}

來源

2015-06-29 18:29:34 Mate

您的回答非常好，但在我的項目中，我實際上在每個div中都有圖表，我只是使用文字使示例更易於理解 – Markus

無論哪種方式謝謝:) – Markus

好的，您可以在innerHTML內設置html內容。例如：innerHTML ='

' – Mate

如何用javascript更改div內容

回答

相關問題