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函数。我建议使用类名作为 - 。不是camelcase，不是标准，但它取决于你的团队。

删除类并添加类

3 个答案: