Question

每次单击时，尝试使用onclick在视觉上重新定位两个div。是否有可能交换每个div的完整CSS onclick来实现这种效果？

这会被认为是最佳做法还是有一个重新安排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的类时，将你的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 个答案: