JavaScript: Bibliothek - Set ClassName

Wir erweitern unsere Bibliothek bib.js um folgende Funktion/Methode:
setClass()
Diese Methode/Funktion erwartet zwei Parameter:

Selektor
className

setClass( 'selektor' , 'className' )

bib.js:

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

Der Aufruf: 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.js als bib.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="setNewClass()">Ausführen</button>



CSS:

.classYellow{
	color: yellow !important;
}

.classRed{
	color: red !important;
}



JavaScript: bib.js:

/* START::: getObj() */
function getObj ( identifier ) {
	const idfName = identifier;
	
	// Element speichern
	const myElem = document.querySelectorAll(idfName);
	
	// Rückgabe des Elementes
	if ( myElem.length === 1 ){ 
		// Element ist eindeutig
		return myElem[0];
	} else { 
		// Mehrere Elemente vorhanden => Rückgabe Array
		return myElem;
	}
}
/* ENDE::: getObj() */

/* START:::  Set Class */
function setClass( el , cl ){
	const myEl = getObj( 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 */

JavaScript:

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