5

要素にクラスを追加し、すでに存在するクラスを置き換えないようにする機能が必要です。

これまでの私のJavaScriptは次のとおりです。

function black(body) {
var item = document.getElementById(body);
    if (item) {
        item.className=(item.className=='normal')?'black':'normal';
    }
}

そのjavascriptは、既存のクラスを。に置き換えますblack。クラスがすでにある場合はblack、に変更されnormalます。

どういうわけか、既存のすべてのクラスを置き換えるのではなく、上のスクリプトを下のスクリプトと組み合わせて、クラスを追加したいと思います。

var item = document.getElementById("body");
item.className = item.className + " additionalclass";
4

3 に答える 3

4

プレーンJavaScriptでクラス名を操作するために使用できるいくつかのプレーンJavaScript関数を次に示します。クラス名全体のみを照合し、クラス名の前後に余分なスペースを入れないようにするには、これらの関数で少し余分な作業が必要です。

function removeClass(elem, cls) {
    var str = " " + elem.className + " ";
    elem.className = str.replace(" " + cls + " ", " ").replace(/^\s+|\s+$/g, "");
}

function addClass(elem, cls) {
    elem.className += (" " + cls);
}

function hasClass(elem, cls) {
    var str = " " + elem.className + " ";
    var testCls = " " + cls + " ";
    return(str.indexOf(testCls) != -1) ;
}

function toggleClass(elem, cls) {
    if (hasClass(elem, cls)) {
        removeClass(elem, cls);
    } else {
        addClass(elem, cls);
    }
}

function toggleBetweenClasses(elem, cls1, cls2) {
    if (hasClass(elem, cls1)) {
        removeClass(elem, cls1);
        addClass(elem, cls2);
    } else if (hasClass(elem, cls2)) {
        removeClass(elem, cls2);
        addClass(elem, cls1);
    }
}

black指定されたオブジェクトの他のクラスに影響を与えずにとクラスを切り替えたい場合はnormal、次のようにすることができます。

function black(id) {
    var obj = document.getElementById(id);
    if (obj) {
        toggleBetweenClasses(obj, "black", "normal");
    }
}

ここでの実例：http：//jsfiddle.net/jfriend00/eR85c/

「通常」がすでに存在しない限り「黒」クラスを追加したい場合は、次のようにすることができます。

function black(id) {
    var obj = document.getElementById(id);
    if (obj && !hasClass(obj, "normal")) {
        addClass(obj, "black");
    }
}
于 2012-08-27T00:54:57.623 に答える
0

クラスをそれほど追加/削除/切り替えない場合は、（jfriend00の回答のような2〜3個の関数を追加する代わりに）以下のコードのようなものを使用することを検討します。

それで、これはそれほど頻繁に使用しない多くの機能を持ちたくないもののための代替案です：

function toggle(id) {
    var obj = document.getElementById(id), str, len;

    if (obj) {
        str = " " + obj.className + " ";
        len = str.length;

        str = str.replace(" normal ", " ");

        if (str.length != len) {
            str += " black";
        } else {
            str = str.replace(" black ", " ");

            if (str.length != len) {
                str += " normal";
            }
        }

        obj.className = str.replace(/^\s+|\s+$/g, "");
    }
}

基本的に長さを保存し、置き換えを試み、クラスが削除されたかどうかをチェックし（古い長さと新しい長さを比較して）、必要な変更を適用します。

注：最初に2つのクラスを同時に持つべきではないという条件で、クラスを完全に切り替えます。

デモ

于 2012-08-27T02:28:25.660 に答える
0

ここでの答えは私には複雑に思えるので、これがあなたが望むものであるかどうかはわかりません...とにかく、古いものを置き換えずにクラス名を追加する必要があったので、これが私がそれをした方法です。

menu.children[i].getElementsByTagName('a')[0].**classList.add('resetAfter')**;

ここではclassList.add()、アンカータグにクラスを追加するために使用しました。

于 2019-08-07T16:09:58.460 に答える