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标签的分层问题

回答

相关问题