使用Javascript動態創建和刪除Div標籤

-2

我想動態地創建3個Div標籤，當我按下3個不同的按鈕（紅色綠色藍色）。當我按下紅色時，我希望'紅色'div的高度爲我的屏幕使整個頁面顯示爲紅色，當我按下綠色時，我希望'紅色'div的高度變爲我屏幕的50％，其他50％的屏幕應該被其他div（綠色）佔據。 ..使用Javascript動態創建和刪除Div標籤

最後當我按下藍色按鈕我想所有的div出現在屏幕上以相等的高度...

我能夠創造的div，但我不能刪除以前創建的div當我按下全部三個按鈕之後按下紅色按鈕時...

下面是代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
     <title>Ass 2</title> 

     <script type="text/javascript"> 

     function fblue() { 
      // document.bgColor = 'lightblue'; 

      selc=document.getElementById("first"); 
      divBlue=document.getElementById("one"); 
      myPara.removeChild(divBlue); 



      selc=document.getElementById("first"); 

      divBlue=document.createElement("div"); 
      divBlue.id = "one"; 
      divBlue.style.backgroundColor = "lightblue"; 
      divBlue.style.height = "610px" 
      divBlue.innerHTML = "dv tag created successfully"; 

      selc.appendChild(divBlue); 
     } 

     function fgreen() { 

      selc=document.getElementById("first"); 
      divBlue=document.getElementById("one"); 


      divBlue.id = "one"; 
      divBlue.style.backgroundColor = "lightblue"; 
      divBlue.style.height = "305px" 
      divBlue.innerHTML = "dv tag created successfully"; 
      selc.appendChild(divBlue); 

      divGreen=document.createElement("div"); 
      divGreen.id = "one"; 
      divGreen.style.backgroundColor = "lightgreen"; 
      divGreen.style.height = "305px" 
      divGreen.innerHTML = "dv tag created successfully"; 
      selc.appendChild(divGreen); 

      //document.bgColor = ''; 
     } 

     function fred() { 

      document.getElementById("one").style.backgroundColor = 'lightblue'; 
      document.getElementById("one").style.width = '1104px'; 
      document.getElementById("one").style.height = '185px'; 

      document.getElementById("two").style.backgroundColor = 'red'; 
      document.getElementById("two").style.width = '1104px'; 
      document.getElementById("two").style.height = '185px'; 

      document.getElementById("three").style.backgroundColor = 'lightgreen'; 
      document.getElementById("three").style.width = '1104px'; 
      document.getElementById("three").style.height = '185px'; 
      document.bgColor = ''; 
     } 

     </script> 
    </head> 
    <body style="margin: 0px;"> 
     <div style="height: 0px;" id="first"></div> 

     <div id="four" style="margin-left: 415px; margin-top: 500px"> 
      <form> 
       <input type="button" name="blu" value="Blue" onclick="javascript:fblue();"> 
       <input type="button" name="gre" value="Green/Red" onclick="javascript:fgreen();"> 
       <input type="button" name="re" value="Red/Green/Blue" onclick="javascript:fred();"> 
      </form> 
     </div> 
    </body> 
</html>

來源

2012-11-10 Nayeem Junaid

標題非常有趣。 – defau1t

你是如何計算你的三個div的高度 – defau1t

如果我是你我會讀http://answers.oreilly.com/topic/2045-distinction-between-local-and-global-variables-javascript/之前擔心divs和大小 – lostsource

document.createElement("div");

將創建一個div dynamiclly

var oldChild = element.removeChild(child); 
element.removeChild(child);

刪除從DOM子節點。返回刪除的節點。

來源

2012-11-10 09:09:04 defau1t

時也可以看到預覽，爲什麼在不使用變量時創建變量「oldChild」？ –

在JavaScript中刪除孩子，你需要引用該元素的父親，如果你能告訴我你是如何計算你的div的高度的，我可以告訴你如何appe nd並在小提琴中移除。 – defau1t

非常感謝..我的問題解決了.. –

使用Javascript動態創建和刪除Div標籤

回答

相關問題