javascript - 如何禁用 CSS 属性并使其无效

Question

好的，这就是概念。我的 HTML 文档有一个 onClick 运行 Javascript 函数的按钮。网页上有两个大分区，按钮的作用是调换分区的位置。比如左边的往右边走，右边的往左边走。

问题是，“left”CSS 属性对“right”属性有支配作用，所以如果在固定宽度的 div 上，left 和 right 属性都设置为 0，它将向左移动。因此，我无法将左边的内容移到右边，因为“左”属性仍然存在。

我需要一些方法使 left 属性无效，就好像我从来没有设置过它一样，所以 div 会向右移动。

这两个 div 分别称为“内容”和“导航”，这是我的 JS:

var order = 0;
var current;
var switchLayout = function() {
    if(order === 0) {
        current = document.getElementById('content');
        current.style.position = 'absolute';
        current = document.getElementById('navigation');
        current.style.left = '0';
        order = 1;
    } else {
        current = document.getElementById('content');
        current.style.position = 'relative';
        current = document.getElementById('navigation');
        current.style.left = 'null';
        current.style.right = '0';
        order = 0;
    }
}

感谢任何帮助。谢谢!

Answer 1

不要在 Javascript 中做你的 css。解决这个问题最简单的方法是有两个 css 类

.left{
 /* styling */
}
.right {
/* styling */
}

var switchLayout = function() {
    var content = document.getElementById('content'),
        nav = document.getElementById('navigation');
    if (content.className === "left") {
        content.className = "right";
        nav.className = "left";
    } else {
        content.className = "left";
        nav.className = "right";
    } 
}