JavaScriptで要素のクラスを変更する



14 Answers

また、次のようにすることもできます。

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

クラスを切り替える(存在する場合は削除する)

document.getElementById('id').classList.toggle('class');
Question

JavaScriptを使用してonClickイベントに応答してHTML要素のクラスを変更するにはどうすればよいですか?




純粋なJavaScriptコードを使用する:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}



以前のregexesのマイナーノートと2つの調整:

クラスリストにクラス名が複数回含まれている場合は、グローバルに処理する必要があります。 また、クラスリストの末尾からスペースを取り除いて、複数のスペースを1つのスペースに変換して、スペースの実行を避けたい場合があります。 クラス名でちょっとしたコードが以下の正規表現を使用していて、それを追加する前に名前を削除すれば、これらのことは問題にならないはずです。 しかし。 まあ、だれがクラス名リストでうんざりしているのか知っています。

この正規表現は大文字と小文字を区別しないため、クラス名の大文字小文字を区別しないブラウザでコードを使用する前にクラス名のバグが表示されることがあります。

var s = "testing   one   four  one  two";
var cls = "one";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");



作業中のJavaScriptコード:

<div id="div_add" class="div_add">Add class from Javascript</div>
<div id="div_replace" class="div_replace">Replace class from Javascript</div>
<div id="div_remove" class="div_remove">Remove class from Javascript</div>
<button onClick="div_add_class();">Add class from Javascript</button>
<button onClick="div_replace_class();">Replace class from Javascript</button>
<button onClick="div_remove_class();">Remove class from Javascript</button>
<script type="text/javascript">
    function div_add_class()
    {
        document.getElementById("div_add").className += " div_added";
    }
    function div_replace_class()
    {
        document.getElementById("div_replace").className = "div_replaced";
    }
    function div_remove_class()
    {
        document.getElementById("div_remove").className = "";
    }
</script>

このリンクから作業コードをダウンロードすることができます。




同様に、クラスを追加、削除、切り替え、チェックするメソッドを追加するために、HTMLElementオブジェクトを拡張できます( gist ):

HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;

HTMLElement.prototype.addClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }
  }
}

HTMLElement.prototype.removeClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
  }
}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }
  }
}

HTMLElement.prototype.hasClass = function(string) {
  return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}

そして、次のように使用してください(クリックするとクラスが追加または削除されます):

document.getElementById('yourElementId').onclick = function() {
  this.toggleClass('active');
}

ここにdemoます。




node.classNameように使用できます。

document.getElementById('foo').className = 'bar';

これは、IE5.5以上でPPKに従って動作するはずです。




それはできます。

HTML:

<div class="red" id="text">
<a href="#" onclick="changeClass();">Fahad</a>
</div>

CSS:

.red a{
  color:red;
}
.black a{
  color:black;
}

JavaScript:

function changeClass(){
document.getElementById("text").className = "black";
}

Fiddle




私はjQueryを使用して、次のように記述します。

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

このコードは、id some要素の要素がクリックされたときに呼び出される関数を追加します。 この関数は、要素のclass属性にclickedを追加ていない場合はそれを追加し、存在する場合は削除します。

はい、このコードを使用するには、ページ内のjQueryライブラリへの参照を追加する必要がありますが、ライブラリのほとんどの機能がすべての最新のブラウザで機能することは少なくとも自信を持って感じることができます。同じことをする独自のコード。

ありがとう




ここに私のバージョンは、完全に動作している:

function addHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    obj.className += " " + classname
}

function removeHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    var classes = ""+obj.className
    while (classes.indexOf(classname)>-1) {
        classes = classes.replace (classname, "")
    }
    obj.className = classes
}

使用法:

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >



違反はありませんが、CSSインタープリタがWebページ全体の視覚的な表示を再計算するように強制するので、クラスをオンザフライで変更することは難しいです。

その理由は、CSSインタプリタが継承またはカスケードを変更できるかどうかを知ることはほとんど不可能であるため、簡単な答えは次のとおりです。

on-the-flyでclassNameを決して変更しないでください! - )

しかし、通常は1つまたは2つのプロパティを変更するだけで済みます。これは簡単に実装できます。

function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}



要素のクラスをトグル/追加/削除するためのトグルクラスです:

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
    var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));

    elem.className=elem.className.replace(matchRegExp, ''); // clear all
    if (add) elem.className += ' ' + theClass;
}

jsfiddle参照してください

動的に新しいクラスを作成するための私の答えも見てください




OK、私はこの場合、jQueryを使うべきか、または独自のメソッドを純粋なjavascriptで書くべきだと思います。私の好みは、他の理由でそれを必要としなければ、自分のアプリケーションにすべてのjQueryを注入するのではなく、

私はjavascriptフレームワークのメソッドとして以下のようなことをして、クラスの追加、クラスの削除、jQueryと同様のいくつかの機能を追加したいと思います。これはIE9 +でも完全にサポートされています。あなたのブラウザがそれをサポートしているかどうかを確認するために、あなたのコードでES5構文を使用する必要があります。このようにして、IDで要素を検索します。つまり、要素にはIDを選択する必要があります。

//simple javascript utils for class management in ES6
var classUtil = {

  addClass: (id, cl) => {
    document.getElementById(id).classList.add(cl);
  },

  removeClass: (id, cl) => {
    document.getElementById(id).classList.remove(cl);
  },

  hasClass: (id, cl) => {
    return document.getElementById(id).classList.contains(cl);
  },

  toggleClass: (id, cl) => {
    document.getElementById(id).classList.toggle(cl);
  }

}

あなたは単に以下のようにそれらを使用することができます、あなたの要素が 'id'のクラスと 'class'のクラスを持っていることを想像して、それらを文字列として渡すことを確認したら、utilを以下のように使用できます:

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');



hereから: here : here

クリックアクションでは、次の方法を試すことができます:

replace(oldClass、newClass)
既存のクラスを新しいクラスに置き換えます。

例:

var myDiv = document.getElementById('myElement'); 
myDiv.classList.contains('myCssClass');
myDiv.classList.replace("myCssClass", "myCssClass_new");



これは私が助けてくれた素晴らしいものです。

function classChangeFn() {
        document.getElementById("MyElement").className = "";
    }

window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click' , classChangeFn );
    }



これを行うための単純なjQueryコードです。

$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});

ここに、

  • Class1はイベントのリスナーです。
  • 親クラスは、変更したいクラスをホストするクラスです
  • Classtoremoveは古いクラスです。
  • 追加するクラスは、追加する新しいクラスです。
  • 100はクラスが変更されるタイムアウト遅延です。

がんばろう。






Related