視覺Div重新放置onclick CSS JS

Question

每當單擊每個div時，嘗試使用onclick視覺上重新定位兩個div。 是否可以交換每個div onclick的完整CSS來達到此效果？

這將被視為最佳實踐，還是有更好的方法來重新排列div容器。

謝謝。

的HTML

    <!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<title>Lines</title>
</head>
<body>
<div id="box_a">
<div id="box_b">
</div>
<div id="box_g">
</div>
</div>
</div>
</div>
</body>
</html>

的CSS

/* Wrap all Divs */

#box_a {
}

/* Background Div */
#box_b {
position: absolute;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: black;
}

/* Foreground Div */

#box_g {
position: absolute;
top: 14.05%;
right: 20%;
bottom: 20%;
left: 20%;
background: white;
z-index: 99;
}

Answer 1

在您只需要在單擊div時更改div的類后，即可將css基於class而不是基於div id。

    function changeClass()
    {
      if (document.getElementById("box_b").className == 'first_css')
         document.getElementById("box_b").className = 'second_css';
      else
         document.getElementById("box_b").className = 'first_css';
    }

我在以下位置更新了它： http : //jsfiddle.net/Gx9B9/2/

視覺Div重新放置onclick CSS JS

問題描述

1 個解決方案

解決方案1
0 2014-03-14 00:40:01

視覺Div重新放置onclick CSS JS

問題描述

1 個解決方案

解決方案1 0 2014-03-14 00:40:01

解決方案1
0 2014-03-14 00:40:01