130 views

Hoe voeg je een klasse toe aan een bepaald element?

Hosted by Code Expert
javascript

Ik heb een element dat al een klasse heeft:

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

Nu wil ik een JavaScript-functie maken die een klasse toevoegt aan de div(niet vervangen, maar toevoegen).

Hoe kan ik dat doen?

Antwoord 1, autoriteit 100%

Als u alleen moderne browsers target:

Gebruik element.classList.addom toe te voegen een les:

element.classList.add("my-class");

En element.classList.removeom te verwijderen een les:

element.classList.remove("my-class");

Als u Internet Explorer 9 of lager moet ondersteunen:

Voeg een spatie plus de naam van je nieuwe klasse toe aan de eigenschap classNamevan het element. Plaats eerst een idop het element zodat je gemakkelijk een referentie kunt krijgen.

<div id="div1" class="someclass">
    <img ... id="image1" name="image1" />
</div>

Dan 

var d = document.getElementById("div1");
d.className += " otherclass";

Let op de spatie voor otherclass. Het is belangrijk om de ruimte op te nemen, anders compromitteert het bestaande klassen die ervoor staan in de klassenlijst.

Zie ook element.classname op MDN .

2, Autoriteit 62%

De eenvoudigste manier om dit te doen zonder een raamwerk is om element te gebruiken. classist.add methode. 

var element = document.getElementById("div1");
element.classList.add("otherclass");

bewerken:
En als u de klas van een element wilt verwijderen – 

element.classList.remove("otherclass");

Ik heb liever geen lege ruimte en dubbele invoer die zelf (die vereist is bij het gebruik van de document.classNamebenadering). Er zijn enkele browserbeperkingen , maar u kunt om hen heen werken met PolyFills .

3, Autoriteit 8%

Zoek uw doelelement “D”, maar u wilt en dan: 

d.className += ' additionalClass'; //note the space

U kunt die in slimmere manieren inpakken om het vóór het bestaan ​​te controleren en op de ruimtevereisten te controleren enz..

4, Autoriteit 6%

Klasse toevoegen

  • Cross Compatibel

    In het volgende voorbeeld voegen we een classnametoe aan de <body>-element. Dit is IE-8-compatibel. 

    var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';

    Dit is een afkorting voor het volgende..

    var a = document.body;
if (a.classList) {
    a.classList.add('wait');
} else {
    a.className += ' wait';
}

  • Prestaties

    Als u zich meer zorgen maakt over prestaties dan over cross-compatibiliteit, kunt u dit inkorten tot het volgende, wat 4% sneller is.

    var z = document.body;
document.body.classList.add('wait');

  • Gemak

    U kunt ook jQuery gebruiken, maar de resulterende prestaties zijn aanzienlijk langzamer. 94% langzamer volgens jsPerf

    $('body').addClass('wait');

De klas verwijderen

  • Prestaties

    JQuery selectief gebruiken is de beste methode om een klasse te verwijderen als u zich zorgen maakt over de prestaties

    var a = document.body, c = ' classname';
$(a).removeClass(c);

  • Zonder jQuery is het 32% langzamer

    var a = document.body, c = ' classname';
a.className = a.className.replace( c, '' );
a.className = a.className + c;

Referenties

  1. jsPerf-testcase: een klas toevoegen
  2. jsPerf-testcase: een klas verwijderen

Prototype gebruiken

Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")

YUI gebruiken

YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")

Antwoord 5, autoriteit 2%

Een andere manier om de klasse aan het element toe te voegen met pure JavaScript

Voor het toevoegen van les:

document.getElementById("div1").classList.add("classToBeAdded");

Voor het verwijderen van een les:

document.getElementById("div1").classList.remove("classToBeRemoved");

Antwoord 6

Als het werk dat ik doe het gebruik van een bibliotheek niet rechtvaardigt, gebruik ik deze twee functies:

function addClass( classname, element ) {
    var cn = element.className;
    //test for existance
    if( cn.indexOf( classname ) != -1 ) {
        return;
    }
    //add a space if the element already has class
    if( cn != '' ) {
        classname = ' '+classname;
    }
    element.className = cn+classname;
}
function removeClass( classname, element ) {
    var cn = element.className;
    var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
    cn = cn.replace( rxp, '' );
    element.className = cn;
}

Antwoord 7

Ervan uitgaande dat je meer doet dan alleen deze ene klasse toevoegen (je hebt bijvoorbeeld asynchrone verzoeken enzovoort), zou ik een bibliotheek als Prototypeof jQuery.

Hierdoor wordt zo ongeveer alles wat u moet doen (inclusief dit) heel eenvoudig.

Dus laten we zeggen dat je nu jQuery op je pagina hebt, je zou code als deze kunnen gebruiken om een klassenaam toe te voegen aan een element (in dit geval bij het laden):

$(document).ready( function() {
  $('#div1').addClass( 'some_other_class' );
} );

Bekijk de jQuery API-browservoor andere dingen.

Antwoord 8

Je kunt de classList.add OR classList.remove methode gebruiken om een klasse toe te voegen aan/te verwijderen uit een element.

var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")

De bovenstaande code zal een klasse “anyclass” toevoegen (en NIET vervangen) aan nameElem.
Op dezelfde manier kun je de classList.remove() methode gebruiken om een klasse te verwijderen.

nameElem.classList.remove("anyclss")

Antwoord 9

Een extra klasse aan een element toevoegen:

Als u een klasse aan een element wilt toevoegen, zonder bestaande waarden te verwijderen/aan te tasten, voegt u een spatie en de nieuwe klassenaam toe, zoals:

document.getElementById("MyElement").className += " MyClass";

Alle klassen voor een element wijzigen:

Als u alle bestaande klassen wilt vervangen door een of meer nieuwe klassen, stelt u het kenmerk className in:

document.getElementById("MyElement").className = "MyClass";

(U kunt een door spaties gescheiden lijst gebruiken om meerdere klassen toe te passen.)

Antwoord 10

Als u jQuery niet wilt gebruiken en oudere browsers wilt ondersteunen:

function addClass(elem, clazz) {
    if (!elemHasClass(elem, clazz)) {
        elem.className += " " + clazz;
    }
}
function elemHasClass(elem, clazz) {
    return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}

Antwoord 11

Ook ik denk dat de snelste manier is om Element.prototype.classList te gebruiken zoals in es5: document.querySelector(".my.super-class").classList.add('new-class')
maar in ie8 bestaat er niet zoiets als Element.prototype.classList, je kunt het hoe dan ook polyfill met dit fragment (het stond je vrij om het te bewerken en te verbeteren):

if(Element.prototype.classList === void 0){
	function DOMTokenList(classes, self){
		typeof classes == "string" && (classes = classes.split(' '))
		while(this.length){
			Array.prototype.pop.apply(this);
		}
		Array.prototype.push.apply(this, classes);
		this.__self__ = this.__self__ || self
	}
	DOMTokenList.prototype.item = function (index){
		return this[index];
	}
	DOMTokenList.prototype.contains = function (myClass){
		for(var i = this.length - 1; i >= 0 ; i--){
			if(this[i] === myClass){
				return true;
			}
		}
		return false
	}
	DOMTokenList.prototype.add = function (newClass){
		if(this.contains(newClass)){
			return;
		}
		this.__self__.className += (this.__self__.className?" ":"")+newClass;
		DOMTokenList.call(this, this.__self__.className)
	}
	DOMTokenList.prototype.remove = function (oldClass){
		if(!this.contains(newClass)){
			return;
		}
		this[this.indexOf(oldClass)] = undefined
		this.__self__.className = this.join(' ').replace(/  +/, ' ')
		DOMTokenList.call(this, this.__self__.className)
	}
	DOMTokenList.prototype.toggle = function (aClass){
		this[this.contains(aClass)? 'remove' : 'add'](aClass)
		return this.contains(aClass);
	}
	DOMTokenList.prototype.replace = function (oldClass, newClass){
		this.contains(oldClass) && this.remove(oldClass) && this.add(newClass)
	}
	Object.defineProperty(Element.prototype, 'classList', {
		get: function() {
			return new DOMTokenList( this.className, this );
		},
		enumerable: false
	})
}

Antwoord 12

Om op een eenvoudige manier elementklassen toe te voegen, te verwijderen of te controleren:

var uclass = {
    exists: function(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));},
    add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += ' '+className;},
    remove: function(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/  /g,' ');elem.className = c;}
};
var elem = document.getElementById('someElem');
//Add a class, only if not exists yet.
uclass.add(elem,'someClass');
//Remove class
uclass.remove(elem,'someClass');

Antwoord 13

Ik weet dat IE9 officieel wordt afgesloten en we kunnen dit bereiken met element.classListzoals velen hierboven hebben verteld, maar ik heb net geprobeerd te leren hoe het werkt zonder classListmet behulp van veel antwoorden hierboven, ik zou het kunnen leren.

De onderstaande code breidt veel bovenstaande antwoorden uit en verbetert ze door dubbele klassen te vermijden.

function addClass(element,className){
  var classArray = className.split(' ');
  classArray.forEach(function (className) {
    if(!hasClass(element,className)){
      element.className += " "+className;
    }
  });            
}
//this will add 5 only once
addClass(document.querySelector('#getbyid'),'3 4 5 5 5');

Antwoord 14

U kunt een moderne benadering gebruiken, vergelijkbaar met jQuery

Als u slechts één element hoeft te wijzigen, het eerste dat JS in DOM zal vinden, kunt u dit gebruiken: 

document.querySelector('.someclass').className += " red";
.red {
  color: red;
}
<div class="someclass">
  <p>This method will add class "red" only to first element in DOM</p>
</div>
<div class="someclass">
  <p>lorem ipsum</p>
</div>
<div class="someclass">
  <p>lorem ipsum</p>
</div>
<div class="someclass">
  <p>lorem ipsum</p>
</div>

Antwoord 15

Om uit te leggen wat anderen hebben gezegd, zijn meerdere CSS-klassen gecombineerd in een enkele tekenreeks, gescheiden door spaties. Dus als je het hard-coded zou willen zien, zou het er zo uit zien:

<div class="someClass otherClass yetAnotherClass">
      <img ... id="image1" name="image1" />
</div>

Van daaruit kun je eenvoudig het javascript afleiden dat nodig is om een nieuwe klasse toe te voegen… voeg gewoon een spatie toe gevolgd door de nieuwe klasse aan de eigenschap className van het element. Als je dit weet, kun je ook een functie schrijven om een klasse later te verwijderen, mocht dat nodig zijn.

Antwoord 16

Ik denk dat het beter is om pure JavaScript te gebruiken, die we kunnen uitvoeren op de DOM van de browser.

Hier is de functionele manier om het te gebruiken. Ik heb ES6 gebruikt, maar voel je vrij om ES5 en functie-expressie of functiedefinitie te gebruiken, afhankelijk van wat past bij je JavaScript StyleGuide.

'use strict'
const oldAdd = (element, className) => {
  let classes = element.className.split(' ')
  if (classes.indexOf(className) < 0) {
    classes.push(className)
  }
  element.className = classes.join(' ')
}
const oldRemove = (element, className) => {
  let classes = element.className.split(' ')
  const idx = classes.indexOf(className)
  if (idx > -1) {
    classes.splice(idx, 1)
  }
  element.className = classes.join(' ')
}
const addClass = (element, className) => {
  if (element.classList) {
    element.classList.add(className)
  } else {
    oldAdd(element, className)
  }
}
const removeClass = (element, className) => {
  if (element.classList) {
    element.classList.remove(className)
  } else {
    oldRemove(element, className)
  }
}

17

document.getElementById('some_id').className+='  someclassname'

of: 

document.getElementById('some_id').classList.add('someclassname')

De eerste benadering hielp bij het toevoegen van de klasse wanneer de tweede aanpak niet werkte.
Vergeet niet om een ​​ruimte voor de ' someclassname'in de eerste benadering te houden.

Voor verwijdering kunt u gebruiken: 

document.getElementById('some_id').classList.remove('someclassname')

18

Monster met Pure JS. In het eerste voorbeeld krijgen we onze ID’s ID en voegen bijvoorbeeld toe. 2 klassen. 

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})

In het tweede voorbeeld krijgen we de klasnaam van het element en voegen we nog 1 toe. 

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})

19

kortste 

image1.parentNode.className+=' box';

20

U kunt de API-querySelector gebruiken om uw element te selecteren en vervolgens een functie te maken met het element en de nieuwe Class-naam als parameters. Met behulp van klassist voor moderne browsers, anders voor IE8. Dan kunt u de functie noemen na een evenement. 

//select the dom element
 var addClassVar = document.querySelector('.someclass');
 //define the addclass function
 var addClass = function(el,className){
   if (el.classList){
     el.classList.add(className);
   }
   else {
     el.className += ' ' + className;
  }
};
//call the function
addClass(addClassVar, 'newClass');

21

Geef eerst de DIV een ID. Vervolgens, oproepfunctie-bijlage: 

<script language="javascript">
  function appendClass(elementId, classToAppend){
    var oldClass = document.getElementById(elementId).getAttribute("class");
    if (oldClass.indexOf(classToAdd) == -1)
    {
      document.getElementById(elementId).setAttribute("class", classToAppend);
    }
}
</script>

22

In mijn geval had ik meer dan één klasse genaamd main-wrapperin de DOM, maar ik wilde alleen de bovenliggende main-wrapperbeïnvloeden. :first Selectorgebruiken (https://api.jquery.com/first -selector/), zou ik het eerste overeenkomende DOM-element kunnen selecteren. Dit was de oplossing voor mij:

$(document).ready( function() {
    $('.main-wrapper:first').addClass('homepage-redesign');
    $('#deals-index > div:eq(0) > div:eq(1)').addClass('doubleheaderredesign');
} );

Ik deed hetzelfde voor de tweede onderliggende items van een specifieke div in mijn DOM, zoals je kunt zien in de code waar ik $('#deals-index > div:eq(0) > div:eq(1)').addClass('doubleheaderredesign');.

OPMERKING: ik heb jQuerygebruikt zoals je kunt zien.

Antwoord 23

Deze js-code werkt voor mij

biedt vervanging van klassenaam

var DDCdiv = hEle.getElementBy.....
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
    if (Ta[i] == 'visible'){
        Ta[i] = 'hidden';
        break;// quit for loop
    }
    else if (Ta[i] == 'hidden'){
        Ta[i] = 'visible';
    break;// quit for loop
    }
}
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

Gebruik gewoon om toe te voegen

var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
Ta.push('New class name');
// Ta.push('Another class name');//etc...
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

Gebruik verwijderen

var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
    if (Ta[i] == 'visible'){
        Ta.splice( i, 1 );
        break;// quit for loop
    }
}
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

Ik hoop dat dit iemand kan helpen

Antwoord 24

Als u in YUI yuidomopneemt, kunt u

gebruiken


YAHOO.util.Dom.addClass('div1','className');

HTH

Previous articleLink met target=“_blank” en rel=“noopener noreferrer” nog steeds kwetsbaar?
Next articleHoe alle groepen te krijgen waarvoor een gebruiker lid is?

Other episodes

Is een functie die Math.random() puur aanroept?

javascript Code Expert - 0
Is het volgende een pure functie? function test(min,max) { return Math.random() * (max - min) + min; } Ik heb begrepen dat een pure...
Read more

Ik wil een tekst of regel met ellips afkappen met JavaScript

javascript Code Expert - 0
Ik ben op zoek naar een eenvoudig script dat een string kan afkappen met ellips (...) Ik wil iets als 'this is a very long...
Read more

firebase.firestore() is geen functie bij het initialiseren van Cloud Firestore

javascript Code Expert - 0
Toen ik Firebase Cloud Firestore probeerde te initialiseren, kwam ik de volgende fout tegen: Uncaught TypeError: WEBPACK_IMPORTED_MODULE_0_firebase.firestore is geen functie Ik heb eerder firebase...
Read more

Hoe krijg ik een hoogte van een toetsenbord in React-Native?

javascript Code Expert - 0
Ik gebruik React-Navigation in mijn app en de app bestaat uit StackNavigator met meerdere schermen, waarvan sommige schermen TextInput hebben met autoFocus={true} Probleem:op deze schermen...
Read more

ReferenceError: prestatie is niet gedefinieerd bij gebruik van performance.now()

javascript Code Expert - 0
Ik krijg een foutmelding ReferenceError: performance is not definedwanneer ik performance.now()om de uitvoeringstijd van een functieaanroep te meten: export async function find(someId: string, ctx: context.IContext)...
Read more

Herhaal een reeks objecten in Typescript

javascript Code Expert - 0
Ik moet de reeks objecten in hoek 2 herhalen en de weergave van de tekenreekslengte voor een bepaalde sleutel in het object beperken. this.productService.loadAllProducts(product).subscribe(data =>...
Read more

Zet lengtebeperking in een TextField in react js

javascript Code Expert - 0
Ik neem een ​​invoer van de gebruiker van het kaartnummer en wil dat de lengte die door de gebruiker wordt ingevoerd niet kleiner en...
Read more

© Copyright - Code Expert 2021