删除班级并添加班级

Question

我正在为移动设备开发JavaScript和CSS3响应HTML菜单。 JS非常简单。 它获取主体的元素ID，如果关闭菜单，则将类更改为menuOpen，反之亦然。 CSS处理实际菜单的所有转换和显示。

<script type="text/javascript">
    function menuButton() {
        if( document.getElementById("htmlbody").className == "menuClosed" ) {
            document.getElementById("htmlbody").className = "menuOpen";
        } else {
            document.getElementById("htmlbody").className = "menuClosed";
        }
    }
</script>

我遇到的问题是这个。 而不是删除整个类并替换整个类，如何删除单个类然后添加单个类？

由于一个元素将包含多个类，因此我需要更改条件以查看其是否包含className，而不是实际的className。 我相信我可以通过执行以下JS来简单地添加新类，但是我不知道如何删除旧类。

document.getElementById("htmlbody").className += "menuOpen";

希望我提供了足够的细节。

编辑

感谢帮助。 我设法使它运作良好。 正是我所需要的。

<script type="text/javascript">
    function menuButton() {
        var htmlBody = document.getElementById("htmlbody");

        if( htmlBody.classList.contains("menuClosed") ) {
            htmlBody.className = htmlBody.className.replace(/(?:^|\s)menuClosed(?=\s|$)/g, " menuOpen");
        } else {
            htmlBody.className = htmlBody.className.replace(/(?:^|\s)menuOpen(?=\s|$)/g, " menuClosed");
        }
    }
</script>

Answer 1

我为此使用正则表达式。 我有一个宏，可以执行以下操作

(node).className = (node).className.replace(/(?:^|\s)cl(?=\s|$)/g,"");

将cl替换为要删除的实际类。 处理删除。 您可以按照您的说法对插入代码进行编码，但是请注意，随着重复的类调用，您的className可能会增加。

Answer 2

功能定义

Node.prototype.hasClass = function (className) {
            if (this.classList) {
                return this.classList.contains(className);
            } else {
                return (-1 < this.className.indexOf(className));
            }
        };




Node.prototype.addClass = function (className) {
    if (this.classList) {
        this.classList.add(className);
    } else if (!this.hasClass(className)) {
        var classes = this.className.split(" ");
        classes.push(className);
        this.className = classes.join(" ");
    }
    return this;
};

Node.prototype.removeClass = function (className) {
    if (this.classList) {
        this.classList.remove(className);
    } else {
        var classes = this.className.split(" ");
        classes.splice(classes.indexOf(className), 1);
        this.className = classes.join(" ");
    }
    return this;
};

用法：

myElement =  document.getElementById("htmlbody");

现在您可以调用myElement.removeClass('myClass')

或链接它： myElement.removeClass("oldClass").addClass("newClass");

这将删除一个类

Answer 3

   function menuButton() {
        var htmlBody = document.getElementById('htmlbody');
        if( htmlBody.className.test(/menuClosed/)) {
            htmlBody.className.replace('menuClosed', 'menuOpen');
        } else if (htmlBody.className.test(/menuOpen/)){
            htmlBody.className.replace('menuOpen', 'menuClosed');;
        }
    }

使用String.replace函数。 我很自豪地将类名用作-。 没有骆驼的情况，不是标准的情况，但这取决于您的团队。