クラスを変更するための最新のHTML5テクニック
最新のブラウザには classList が追加されました。これにより、ライブラリを必要とせずにクラスを簡単に操作できるメソッドが提供されます。
document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
if ( document.getElementById("MyElement").classList.contains('MyClass') )
document.getElementById("MyElement").classList.toggle('MyClass');
残念ながら、これらはv10より前のInternet Explorerでは機能しませんが、IE8およびIE9にサポートを追加する shim があります このページ から利用できます。しかし、それはますます サポートされる になっています。
シンプルなクロスブラウザソリューション
要素を選択する標準的なJavaScriptの方法は document.getElementById("Id") を使用します。これは次の例で使用するものです-もちろん、他の方法で要素を取得でき、適切な状況ではthis代わりに-しかし、これについて詳しく説明することは答えの範囲を超えています。
要素のすべてのクラスを変更するには：
すべての既存のクラスを1つ以上の新しいクラスに置き換えるには、className属性を設定します。
document.getElementById("MyElement").className = "MyClass";
（スペース区切りリストを使用して、複数のクラスを適用できます。）
追加のクラスを要素に追加するには：
既存の値を削除/影響せずに要素にクラスを追加するには、次のようにスペースと新しいクラス名を追加します。
document.getElementById("MyElement").className += " MyClass";
要素からクラスを削除するには：
他の潜在的なクラスに影響を与えることなく、要素から単一のクラスを削除するには、単純な正規表現の置換が必要です。
document.getElementById("MyElement").className =
document.getElementById("MyElement").className.replace
( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */
この正規表現の説明は次のとおりです。
(?:^|\s) # Match the start of the string, or any single whitespace character
MyClass # The literal text for the classname to remove
(?!\S) # Negative lookahead to verify the above is the whole classname
# Ensures there is no non-space character following
# (i.e. must be end of string or a space)
gフラグは、クラス名が複数回追加された場合に、必要に応じて繰り返すように置き換えを指示します。
クラスがすでに要素に適用されているかどうかを確認するには：
クラスを削除するために上記で使用したものと同じ正規表現は、特定のクラスが存在するかどうかのチェックとしても使用できます。
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
これらのアクションをonclickイベントに割り当てる：
HTMLイベント属性（onclick="this.className+=' MyClass'"など）内にJavaScriptを直接記述することは可能ですが、これは推奨されない動作です。特に大規模なアプリケーションでは、HTMLマークアップをJavaScriptインタラクションロジックから分離することにより、より保守性の高いコードが実現されます。
これを達成するための最初のステップは、関数を作成し、onclick属性で関数を呼び出すことです。次に例を示します。
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
</script>
...
<button onclick="changeClass()">My Button</button>
（スクリプトタグにこのコードを含める必要はありません。これは単に例を簡潔にするためであり、JavaScriptを個別のファイルに含める方が適切な場合があります。）
2番目のステップは、たとえば addEventListener を使用して、onclickイベントをHTMLからJavaScriptに移動することです。
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
window.onload = function(){
document.getElementById("MyElement").addEventListener( 'click', changeClass);
}
</script>
...
<button id="MyElement">My Button</button>
（window.onload部分は、その関数のコンテンツが実行されるように必要であることに注意してくださいHTMLの読み込みが完了した後-これがないと、JavaScriptコードがが呼び出されるため、その行は失敗します。）
JavaScriptフレームワークとライブラリ
上記のコードはすべて標準JavaScriptですが、フレームワークまたはライブラリのいずれかを使用して一般的なタスクを簡素化し、コードの作成時に考えられない可能性のある修正されたバグやエッジケースの恩恵を受けることが一般的です。
一部の人々は、クラスを単に変更するために〜50 addKBフレームワークを追加するのはやり過ぎだと考えていますが、かなりの量のJavaScript作業、または異常なクロスブラウザー動作を行う可能性があるものを実行している場合は、検討する価値があります。
（非常に大まかに言って、ライブラリは特定のタスク用に設計されたツールのセットですが、フレームワークには通常複数のライブラリが含まれており、完全な職務を実行します。）
上記の例を jQuery を使用して以下に再現しました。おそらく最も一般的に使用されるJavaScriptライブラリです（ただし、調査する価値のある他のものもあります）。
（ここで$はjQueryオブジェクトであることに注意してください。）
JQueryを使用したクラスの変更：
$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ( $('#MyElement').hasClass('MyClass') )
さらに、jQueryには、適用されない場合にクラスを追加したり、以下を実行するクラスを削除したりするためのショートカットが用意されています。
$('#MyElement').toggleClass('MyClass');
JQueryを使用してクリックイベントに関数を割り当てる：
$('#MyElement').click(changeClass);
または、IDを必要とせずに：
$(':button:contains(My Button)').click(changeClass);
あなたもすることができます：
document.getElementById（ 'id'）。classList.add（ 'class'）; document.getElementById（ 'id'）。classList.remove（ 'class'）; ]
そしてクラスを切り替えるには（存在する場合は削除、それ以外の場合は追加）：
document.getElementById（ 'id'）。classList.toggle（ 'class'）;
JQueryを使用しなかった私の古いプロジェクトの1つでは、要素にクラスがあるかどうかを追加、削除、および確認するための以下の関数を作成しました。
function hasClass(ele, cls) {
return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
if (!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, ' ');
}
}
したがって、たとえば、onclickにクラスを追加したい場合は、これを使用できます。
<script type="text/javascript">
function changeClass(btn, cls) {
if(!hasClass(btn, cls)) {
addClass(btn, cls);
}
}
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>
確かに今ではjQueryを使うほうがいいでしょう。
node.classNameはこんな感じで使えます：
document.getElementById('foo').className = 'bar';
これはIE5.5以降で _ ppk _ に従って動作するはずです。
うわー、あまりにも多くのやり過ぎの答えがここにあることに驚いた...
<div class="firstClass" onclick="this.className='secondClass'">
純粋な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);
}
}
これは私のために働いています：
function setCSS(eleID) {
var currTabElem = document.getElementById(eleID);
currTabElem.setAttribute("class", "some_class_name");
currTabElem.setAttribute("className", "some_class_name");
}
同様に、クラスを追加、削除、切り替え、チェックするメソッドを追加するために、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 です。
他の一般的なフレームワークであるGoogle Closuresからの情報を追加するために、 dom/classes classを参照してください。
goog.dom.classes.add(element, var_args)
goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)
goog.dom.classes.remove(element, var_args)
要素を選択するための1つのオプションは、CSS3セレクターと共に goog.dom.query を使用することです。
var myElement = goog.dom.query("#MyElement")[0];
前の正規表現についてのいくつかのマイナーノートと微調整：
クラスリストにクラス名が複数回ある場合は、グローバルにそれを実行する必要があります。また、クラスリストの末尾からスペースを削除し、複数のスペースを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, ' ') + "]");
ASP.NET ：のJavaScriptで要素のCSSクラスを変更します。
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
End If
End Sub
私はjQueryを使用し、このようなものを書くでしょう：
jQuery(function($) {
$("#some-element").click(function() {
$(this).toggleClass("clicked");
});
});
このコードは、id some-element の要素がクリックされたときに呼び出される関数を追加します。この関数は、要素のclass属性に clicked が追加されていない場合はそれを追加し、存在する場合は削除します。
はい、このコードを使用するには、ページにjQueryライブラリへの参照を追加する必要がありますが、少なくともライブラリ内のほとんどの関数が、ほとんどすべての最近のブラウザで機能すると確信でき、実装時間が節約できます同じことをするためのあなた自身のコード。
ありがとう
この線
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')
する必要があります：
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');
これが私のバージョンです。
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")' >
これは、要素のクラスを切り替え/追加/削除するためのtoggleClassです。
// 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 を参照してください。
私の答えも参照してください ここ 動的に新しいクラスを作成するための
IE6サポート付きのVanilla JavaScriptで要素のクラスを変更する
あなたはIE6でも古いブラウザとの互換性を保つためにnode attributesプロパティを使うことを試みるかもしれません：
function getClassNode(element) {
for (var i = element.attributes.length; i--;)
if (element.attributes[i].nodeName === 'class')
return element.attributes[i];
}
function removeClass(classNode, className) {
var index, classList = classNode.value.split(' ');
if ((index = classList.indexOf(className)) > -1) {
classList.splice(index, 1);
classNode.value = classList.join(' ');
}
}
function hasClass(classNode, className) {
return classNode.value.indexOf(className) > -1;
}
function addClass(classNode, className) {
if (!hasClass(classNode, className))
classNode.value += ' ' + className;
}
document.getElementById('message').addEventListener('click', function() {
var classNode = getClassNode(this);
var className = hasClass(classNode, 'red') && 'blue' || 'red';
removeClass(classNode, 'red');
removeClass(classNode, 'blue');
addClass(classNode, className);
}).red {
color: red;
}
.red:before {
content: 'I am red! ';
}
.red:after {
content: ' again';
}
.blue {
color: blue;
}
.blue:before {
content: 'I am blue! '
}<span id="message" class="">Click me</span>私のコードでは、以下のVanilla JavaScript関数を使用しています。それらは正規表現とindexOfを使いますが、正規表現の中で特殊文字を引用符で囲む必要はありません。
function addClass(el, cn) {
var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
c1 = (" " + cn + " ").replace(/\s+/g, " ");
if (c0.indexOf(c1) < 0) {
el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, "");
}
}
function delClass(el, cn) {
var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
c1 = (" " + cn + " ").replace(/\s+/g, " ");
if (c0.indexOf(c1) >= 0) {
el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, "");
}
}
最近のブラウザでは element.classList を使用することもできます。
classList DOM API：
クラスを追加および削除するための非常に便利な方法はclassList DOM APIです。このAPIを使用すると、JavaScriptを使用してリストを変更するために特定のDOM要素のすべてのクラスを選択できます。例えば：
const el = document.getElementById("main");
console.log(el.classList);<div class="content wrapper animated" id="main"></div>ログから、要素のクラスだけでなく、多くの補助的なメソッドやプロパティを持つオブジェクトを取得していることがわかります。このオブジェクトは、/クラスのようにスペースで区切られたトークンのセットを表すためにDOMで使用されるインターフェイス DOMTokenList から継承します。
例：
const el = document.getElementById('container');
function addClass () {
el.classList.add('newclass');
}
function replaceClass () {
el.classList.replace('foo', 'newFoo');
}
function removeClass () {
el.classList.remove('bar');
}button{
margin: 20px;
}
.foo{
color: red;
}
.newFoo {
color: blue;
}
.bar{
background-color:powderblue;
}
.newclass{
border: 2px solid green;
}<div class="foo bar" id="container">
"Sed ut perspiciatis unde omnis
iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas
</div>
<button onclick="addClass()">AddClass</button>
<button onclick="replaceClass()">ReplaceClass</button>
<button onclick="removeClass()">removeClass</button>
この場合、jQueryを使用するか、独自のメソッドを純粋なjavascriptで記述する必要があると思います。他の理由で必要ない場合は、すべてのjQueryをアプリケーションにインジェクトするのではなく、独自のメソッドを追加します。
JQueryと同様に、クラスの追加、クラスの削除などを処理するいくつかの機能を追加するために、javascriptフレームワークのメソッドとして以下のようなことをしたいと思います。これはIE6で完全にサポートされています。ブラウザで確実にサポートされているか、またはbabelのようなものを使用しているかどうかを確認するには、そうでなければES5構文をコードで使用する必要があります。
//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);
}
}
そして、あなたは単に以下のようにuse useと呼ぶことができます、あなたの要素が 'id'のIDと 'class'のクラスを持っていると想像して、あなたが文字列としてそれらを渡すことを確認してください。
classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');
はい、これを行うには多くの方法があります。 ES6の構文では簡単に実現できます。 このコードを使用してクラスの追加と削除を切り替えます。
const tabs=document.querySelectorAll('.menu li');
for(let tab of tabs){
tab.onclick=function(){
let activetab=document.querySelectorAll('li.active');
activetab[0].classList.remove('active')
tab.classList.add('active');
}
}body {
padding:20px;
font-family:sans-serif;
}
ul {
margin:20px 0;
list-style:none;
}
li {
background:#dfdfdf;
padding:10px;
margin:6px 0;
cursor:pointer;
}
li.active {
background:#2794c7;
font-weight:bold;
color:#ffffff;
}<i>Please click an item:</i>
<ul class="menu">
<li class="active"><span>Three</span></li>
<li><span>Two</span></li>
<li><span>One</span></li>
</ul>ちょうど私がこれを投げると思った：
function inArray(val, ary){
for(var i=0,l=ary.length; i<l; i++){
if(ary[i] === val){
return true;
}
}
return false;
}
function removeClassName(classNameS, fromElement){
var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
for(var i=0,l=s.length; i<l; i++){
if(!iA(s[i], x))r.Push(s[i]);
}
fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
var s = toElement.className.split(/\s/);
s.Push(c); toElement.className = s.join(' ');
}
myElement.classList="new-class"メソッドを使用できる場合は、他の既存のクラスを保守する必要がある場合を除き、classList.add, .removeを入力します。
var doc = document;
var divOne = doc.getElementById("one");
var goButton = doc.getElementById("go");
goButton.addEventListener("click", function() {
divOne.classList="blue";
});div{
min-height:48px;
min-width:48px;
}
.bordered{
border: 1px solid black;
}
.green{
background:green;
}
.blue{
background: blue;
}<button id="go">Change Class</button>
<div id="one" class="bordered green">
</div>やってみる
function change(el) { el.className='second' }.first { width: 50px; height: 50px; background: blue }
.second { width: 150px; height: 150px; background: red; transition: all 0.3s ease-in }<button onclick="change(box)">Click me</button>
<div id="box" class="first"></div>オプション。
使用可能なオプションと、classListを使用して必要な処理を行う方法を確認するための、小さなスタイルとclassListの例を次に示します。
style vs. classList
styleとclassListの違いは、styleを使用して要素のスタイルプロパティに追加することですが、classListが要素（add、remove、toggle、contain）のクラスを制御していることです。 addおよびremoveメソッドは一般的なものであるため、これらを使用する。
スタイルの例
margin-topプロパティを要素に追加する場合は、次のようにします。
// Get the Element
const el = document.querySelector('#element');
// Add CSS property
el.style.margintop = "0px"
el.style.margintop = "25px" // This would add a 25px to the top of the element.
classListの例
<div class="class-a class-b">があるとします。この場合、既にdiv要素にclass-aとclass-bの2つのクラスが追加されており、どのクラスremoveおよびaddのクラス。ここでclassListが便利になります。
class-bを削除します
// Get the Element
const el = document.querySelector('#element');
// Remove class-b style from the element
el.classList.remove("class-b")
class-cを追加
// Get the Element
const el = document.querySelector('#element');
// Add class-b style from the element
el.classList.add("class-c")
たくさんの答え、たくさんの良い答え。
TL; DR：
document.getElementById('id').className = 'class'
OR
document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');
それです。
そして、あなたが本当に理由を知り、自分自身を教育したいのであれば、私はPeter Boughtonの答えを読むことをお勧めします、それは完璧です：
https://stackoverflow.com/a/196038/1804013
- getElementById（）
- getElementsByClassName（）
- querySelector（）
- querySelectorAll（）