Div標籤的分層問題

假如我有兩個div層Div標籤的分層問題

<div id="div1"> One </div> 
<div id="div2"> Two </div>

我想他們兩個重疊

，當我按一下按鈕我想的是，Div1構成層在後臺去頂層應該成爲Div2。

如何通過JavaScript實現它？

來源

2011-01-22 Yahoo

如果z-index正在用CSS設置，那麼你需要獲得元素的計算樣式，所以直接讓element.style.zIndex將無法工作。由於這是在IE中執行不同於在其他瀏覽器，讓我們做一個函數來獲取計算樣式：

var getCompStyle = function(id) { 
    var curStyle; 
    if (window.getComputedStyle) { 
     curStyle = window.getComputedStyle(document.getElementById(id), null); 
    } else { 
     curStyle = document.getElementById(id).currentStyle; 
    } 
    return curStyle; 
};

一旦我們有了這個功能，我們就可以應用z-index相應附加到按鈕單擊處理程序：

document.getElementById('switch').onclick = function(e) { 
    var div1style = getCompStyle('div1'); 
    var div2style = getCompStyle('div2'); 
    var switcher = div1style.zIndex; 
    document.getElementById('div1').style.zIndex = div2style.zIndex; 
    document.getElementById('div2').style.zIndex = switcher; 
};

我創建了a fiddle example here (link)來演示。

來源

2011-01-22 15:58:41 mVChr

如何更改按鈕的值？當顯示DIV 1時，按鈕的值爲「1」，當顯示2nd Div時，值應該爲「2」 – Yahoo 2011-01-22 16:08:46

那麼，從我讀的內容來看，你只是想展示一個而隱藏另一個？你可以用css中的display來做到這一點。這是你可以做到的一種方式。

<div id="div1">One</div> 
<div id="div2" style="display:none;">Two</div> 
<button onClick="change_layer()">Change the Layer</button> 


function change_layer(){ 
    document.getElementById("div1").style.display = "none"; 
    document.getElementById("div2").style.display = "block"; 
}

你也可以使用JQuery，但如果這是你所需要做的，那麼可能不需要JQuery。如果你真的希望他們分層，你將不得不在css中使用z-index。

來源

2011-01-22 15:45:15 Will

重疊可以通過將position:relative設置爲div1並將div2作爲div1的子項來完成。併爲div2設置position:absolute; top:0px; left:0px; width:100%;。

<div id="div1"> 
    <div id="div2"></div> 
</div>

的javascript -

document.getElementById("div1").onclick = function(){ 
     //by "Div1 layer to go in the background" i assume you mean disappear or hide 
     this.style.display = 'none'; 
     document.getElementById("div2").style.display = 'block'; 
};

來源

2011-01-22 15:45:46 naiquevin

垂直定位控制在使用「z索引」參數CSS。你可以通過訪問元素的「style」參數來設置它。

這裏有一個完整的例子，以說明棘手點意見，注意：

<!DOCTYPE html> 
<html> 
    <head> 
     <style type='text/css'> 
      .container { 
       /* Needs explicit positioning for "absolute" positioning of 
        child elements to work properly */ 
       position: relative; 
       /* Need to set height, because absolute-positioned child elements take up no space */ 
       height: 50px; 
      } 
      #div1, #div2 { 
       position: absolute; 
       left: 0; 
       top: 0; 
       width: 100px; 
       height: 50px; 
       /* without a background color, you'll see div1 through div2. */ 
       background-color: white; 
       /* border makes it easier to see while testing */ 
       border: 1px solid red; 
      } 
     </style> 
     <script type='text/javascript'> 
      function swapDivs() { 
       var div1 = document.getElementById('div1'); 
       var div2 = document.getElementById('div2'); 
       // swap zIndex values. 
       var temp = div1.style.zIndex; 
       div1.style.zIndex = div2.style.zIndex; 
       div2.style.zIndex = temp; 
      } 
     </script> 
    </head> 
    <body> 
     <div class='container'> 
      <div id="div1" style='z-index: 0;'> One </div> 
      <div id="div2" style='z-index: 1;'> Two </div> 
     </div> 
     <input id='switch' type='button' value='switch' onclick='swapDivs();' /> 
    </body> 
</html>

來源

2011-01-22 15:46:35 user85461

它的工作原理！ :)我怎樣才能改變按鈕的值？當顯示DIV 1時，按鈕的值爲「1」，當顯示2nd Div時，值應該爲「2」 – Yahoo 2011-01-22 16:00:25

Div標籤的分層問題

回答

相關問題