JavaScriptでクラスを追加/削除する方法は？
element.classList はIE 9およびSafari-5ではサポートされていません。代替のクロスブラウザーソリューションは何ですか？
フレームワークなし お願いします。
解決策must少なくともIE 9、Safari 5、FireFox 4、Opera 11.5、およびChrome。
関連する投稿（ただし、ソリューションは含まれません）：
フレームワーク/ライブラリなしでクラスを操作する1つの方法は、Element.classNameプロパティを使用することです。これは、「指定された要素のクラス属性の値を取得および設定します。」（ MDN documentation ）から。
As @matías-fidemraizer 既に回答で述べたように、要素のクラスの文字列を取得したら、文字列に関連付けられたメソッドを使用して変更できます。
以下に例を示します。
IDが「myDiv」のdivがあり、ユーザーがクリックしたときにクラスに「main__section」を追加するとします。
window.onload = init;
function init() {
document.getElementById("myDiv").onclick = addMyClass;
}
function addMyClass() {
var classString = this.className; // returns the string of all the classes for myDiv
var newClass = classString.concat(" main__section"); // Adds the class "main__section" to the string (notice the leading space)
this.className = newClass; // sets className to the new string
}
以下は、純粋なJavaScriptソリューションでのaddClass、removeClass、hasClassのソリューションです。
実際には http://jaketrent.com/post/addremove-classes-raw-javascript/
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,' ');
}
}
私はこれらを書きました：
function addClass(el, classNameToAdd){
el.className += ' ' + classNameToAdd;
}
function removeClass(el, classNameToRemove){
var elClass = ' ' + el.className + ' ';
while(elClass.indexOf(' ' + classNameToRemove + ' ') !== -1){
elClass = elClass.replace(' ' + classNameToRemove + ' ', '');
}
el.className = elClass;
}
すべてのブラウザで動作すると思います。
最も単純なのは element.classList で、これにはremove(name)、add(name)、toggle(name)、contains(name)メソッドがあり、現在は- すべての主要なブラウザでサポートされています 。
olderブラウザの場合、変更するのは element.className です。以下に2つのヘルパーを示します。
function addClass(element, className){
element.className += ' ' + className;
}
function removeClass(element, className) {
element.className = element.className.replace(
new RegExp('( |^)' + className + '( |$)', 'g'), ' ').trim();
}
これらのonelinersを見てください：
クラスを削除：
element.classList.remove('hidden');クラスを切り替えます（まだ存在しない場合はクラスを追加し、存在する場合は削除します）
element.classList.toggle('hidden');
それで全部です！テストを行いました-10000回の反復。 0.8秒。
このMozilla Developer Networkの記事を読んでください。
element.classNameプロパティは文字列型であるため、JavaScript実装にある通常のStringオブジェクト関数を使用できます。
クラスを追加する場合は、最初に
String.indexOfを使用して、classNameにクラスが存在するかどうかを確認します。存在しない場合は、空白文字と新しいクラス名をこのプロパティに連結するだけです。存在する場合は、何もしません。クラスを削除する場合は、
String.replaceを使用し、「[className]」を空の文字列に置き換えます。最後にString.trimを使用して、element.classNameの先頭と末尾の空白文字を削除します。
@Paulproからの解決策を修正
- 「クラス」は予約語であるため使用しないでください
- 繰り返し使用するとバグが発生したため、
removeClass関数は壊れていました。
`
function addClass(el, newClassName){
el.className += ' ' + newClassName;
}
function removeClass(el, removeClassName){
var elClass = el.className;
while(elClass.indexOf(removeClassName) != -1) {
elClass = elClass.replace(removeClassName, '');
elClass = elClass.trim();
}
el.className = elClass;
}
解決策は
シム.classList：
DOM-shim を使用するか、以下のEli Greyのシムを使用します
免責事項：サポートはFF3.6 +、Opera10 +、FF5、Chrome、IE8 +
/*
* classList.js: Cross-browser full element.classList implementation.
* 2011-06-15
*
* By Eli Grey, http://eligrey.com
* Public Domain.
* NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
*/
/*global self, document, DOMException */
/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/
if (typeof document !== "undefined" && !("classList" in document.createElement("a"))) {
(function (view) {
"use strict";
var
classListProp = "classList"
, protoProp = "prototype"
, elemCtrProto = (view.HTMLElement || view.Element)[protoProp]
, objCtr = Object
, strTrim = String[protoProp].trim || function () {
return this.replace(/^\s+|\s+$/g, "");
}
, arrIndexOf = Array[protoProp].indexOf || function (item) {
var
i = 0
, len = this.length
;
for (; i < len; i++) {
if (i in this && this[i] === item) {
return i;
}
}
return -1;
}
// Vendors: please allow content code to instantiate DOMExceptions
, DOMEx = function (type, message) {
this.name = type;
this.code = DOMException[type];
this.message = message;
}
, checkTokenAndGetIndex = function (classList, token) {
if (token === "") {
throw new DOMEx(
"SYNTAX_ERR"
, "An invalid or illegal string was specified"
);
}
if (/\s/.test(token)) {
throw new DOMEx(
"INVALID_CHARACTER_ERR"
, "String contains an invalid character"
);
}
return arrIndexOf.call(classList, token);
}
, ClassList = function (elem) {
var
trimmedClasses = strTrim.call(elem.className)
, classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
, i = 0
, len = classes.length
;
for (; i < len; i++) {
this.Push(classes[i]);
}
this._updateClassName = function () {
elem.className = this.toString();
};
}
, classListProto = ClassList[protoProp] = []
, classListGetter = function () {
return new ClassList(this);
}
;
// Most DOMException implementations don't allow calling DOMException's toString()
// on non-DOMExceptions. Error's toString() is sufficient here.
DOMEx[protoProp] = Error[protoProp];
classListProto.item = function (i) {
return this[i] || null;
};
classListProto.contains = function (token) {
token += "";
return checkTokenAndGetIndex(this, token) !== -1;
};
classListProto.add = function (token) {
token += "";
if (checkTokenAndGetIndex(this, token) === -1) {
this.Push(token);
this._updateClassName();
}
};
classListProto.remove = function (token) {
token += "";
var index = checkTokenAndGetIndex(this, token);
if (index !== -1) {
this.splice(index, 1);
this._updateClassName();
}
};
classListProto.toggle = function (token) {
token += "";
if (checkTokenAndGetIndex(this, token) === -1) {
this.add(token);
} else {
this.remove(token);
}
};
classListProto.toString = function () {
return this.join(" ");
};
if (objCtr.defineProperty) {
var classListPropDesc = {
get: classListGetter
, enumerable: true
, configurable: true
};
try {
objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
} catch (ex) { // IE 8 doesn't support enumerable:true
if (ex.number === -0x7FF5EC54) {
classListPropDesc.enumerable = false;
objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
}
}
} else if (objCtr[protoProp].__defineGetter__) {
elemCtrProto.__defineGetter__(classListProp, classListGetter);
}
}(self));
}
誰かが要素用にプロトタイプ関数を構築したい場合に備えて、これは異なるオブジェクトのクラスを操作する必要があるときに使用するものです：
_Element.prototype.addClass = function (classToAdd) {
var classes = this.className.split(' ')
if (classes.indexOf(classToAdd) === -1) classes.Push(classToAdd)
this.className = classes.join(' ')
}
Element.prototype.removeClass = function (classToRemove) {
var classes = this.className.split(' ')
var idx =classes.indexOf(classToRemove)
if (idx !== -1) classes.splice(idx,1)
this.className = classes.join(' ')
}
_次のように使用します：document.body.addClass('whatever')またはdocument.body.removeClass('whatever')
本文の代わりに、他の要素（div、span、名前を付ける）を使用することもできます
function addClass(element, classString) {
element.className = element
.className
.split(' ')
.filter(function (name) { return name !== classString; })
.concat(classString)
.join(' ');
}
function removeClass(element, classString) {
element.className = element
.className
.split(' ')
.filter(function (name) { return name !== classString; })
.join(' ');
}
Emilのコードの改善されたバージョン（trim（）を使用）
function hasClass(ele,cls) {
return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function addClass(ele,cls) {
if (!hasClass(ele,cls)) ele.className = ele.className.trim() + " " + cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className = ele.className.replace(reg,' ');
ele.className = ele.className.trim();
}
}
cSSクラスを追加：_cssClassesStr += cssClassName;_
cSSクラスを削除します：cssClassStr = cssClassStr.replace(cssClassName,"");
属性「クラス」を追加：object.setAttribute("class", ""); //pure addition of this attribute
属性の削除：object.removeAttribute("class");
わかりやすい方法：
// Add class
DOMElement.className += " one";
// Example:
// var el = document.body;
// el.className += " two"
// Remove class
function removeDOMClass(element, className) {
var oldClasses = element.className,
oldClassesArray = oldClasses.split(" "),
newClassesArray = [],
newClasses;
// Sort
var currentClassChecked,
i;
for ( i = 0; i < oldClassesArray.length; i++ ) {
// Specified class will not be added in the new array
currentClassChecked = oldClassesArray[i];
if( currentClassChecked !== className ) {
newClassesArray.Push(currentClassChecked);
}
}
// Order
newClasses = newClassesArray.join(" ");
// Apply
element.className = newClasses;
return element;
}
// Example:
// var el = document.body;
// removeDOMClass(el, "two")
https://Gist.github.com/sorcamarian/ff8db48c4dbf4f5000982072611955a2