JavaScript: Bibliothek - Set ClassName mit Objekt

Ich möchte jetzt unsere bib_oop.js um die oben vorgestellte Funktion erweitern:
setClass()
Unsere Methode erwartet zwei Parameter:

Selektor
className

bib.setClass( 'selektor' , 'className' )

bib_oop.js:

function getObj(){
...
	this.setClass = function( el , cl ){
		const myEl = this.elem( el );
		// Wenn ein Array geliefert wird
		if ( myEl.length > 1 ) {
			myEl.forEach( el => {
				el.classList.add( cl );
			});
		}else{
			myEl.classList.add( cl );
		}
	}
}

// Initialisierung
const bib = new getObj();

Der Aufruf: bib.setClass( 'selektor' , 'className' ) wie Oben schon gezeigt.

Wenn Ihr Anregungen oder Kommentare habt, seid so nett und kontaktiert mich unter: Kontakt

Kopiert Euch gerne den Code und probiert es aus: Code
Kopiert Euch die gesamte bib_oop.js als bib_oop.txt: Code

Beispiel

Multi-ClassName

Single-ClassName

Code


HTML:

<div id="wrapper" class="my-wrapper">
	<div class="multi-class">Multi-ClassName</div>
	<div class="multi-class">Multi-ClassName</div>
	<div class="multi-class">Multi-ClassName</div>
	<div class="multi-class">Multi-ClassName</div>
	<div class="single-class">Single-ClassName</div>
</div>
<br>
<form name="skillflow">
	<p>
		Wem zuweisen?
		<br> 
		<select id="selector" name="myselector">
			<option value=".multi-class">Multi-ClassName</option>
			<option value=".single-class">Single-ClassName</option>
		</select>
	</p>
	<p>
		Was zuweisen?<br> 
		<select id="myclass" name="myclass">
			<option value="classYellow">classYellow</option>
			<option value="classRed">classRed</option>
		</select>
	</p>
</form>
</div>
<br>
<button id="buttonid" class="ancor_button" name="buttonname" 
onclick="setNewClassOop()">Ausführen</button>



CSS:

.classYellow{
	color: yellow !important;
}

.classRed{
	color: red !important;
}



JavaScript: bib_oop.js:

/* START::: getObj() */
function getObj(){
	// die Methode elem übernimmt an dieser Stelle die Arbeit
	this.elem =  function( identifier ) {
		// Element speichern
		const myElem = document.querySelectorAll( identifier );
		
		// Rückgabe des Elementes
		if ( myElem.length === 1 ) { 
			// Element ist eindeutig => ID oder
			// es wurde nur ein Element gefunden
			return myElem[0];
		} else { 
			// Mehrere Elemente vorhanden => Rückgabe Array
			return myElem;
		}
	};
	/* ENDE::: getObj() */
...
	/* START:::  Set Class */
	this.setClass = function( el , cl ){
	const myEl = this.elem( el );
	// Wenn ein Array geliefert wird
		if ( myEl.length > 1 ) {
			myEl.forEach( el => {
				el.classList.add( cl );
			});
		}else{
			myEl.classList.add( cl );
		}
	}
	/* ENDE::: Set Class */
}
/* ENDE::: getObj() */
// Initialisierung
const bib = new getObj();

JavaScript:

function setNewClassOop(){
	// Options auslesen
	const selector = bib.elem('#selector').value;
	const myclass  = bib.elem('#myclass').value;
	
	// Ausführen
	bib.setClass( selector , myclass);
}