une - récupérer class javascript




Changer la classe d'un élément avec JavaScript (17)

Comment modifier une classe d'un élément HTML en réponse à un événement onClick aide de JavaScript?


Changer la classe d'un élément en JavaScript vanille avec le support IE6

Vous pouvez essayer d'utiliser la propriété d' attributes noeud pour conserver la compatibilité avec les anciens navigateurs, même IE6:

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>


API DOM classList :

L'API DOM classList est une manière très pratique d'ajouter et de supprimer des classes. Cette API nous permet de sélectionner toutes les classes d'un élément DOM spécifique afin de modifier la liste à l'aide de javascript. Par exemple:

const el = document.getElementById("main");
console.log(el.classList);
<div class="content wrapper animated" id="main"></div>

Nous pouvons observer dans le journal que nous récupérons un objet avec non seulement les classes de l'élément, mais également de nombreuses méthodes et propriétés auxiliaires. Cet objet hérite de l'interface DOMTokenList , une interface utilisée dans le DOM pour représenter un ensemble de jetons séparés par des espaces (comme des classes).

Exemple:

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>
  


Aucune infraction, mais il est oncle de changer de classe à la volée car cela oblige l'interpréteur CSS à recalculer la présentation visuelle de la page Web entière.

La raison en est qu'il est presque impossible pour l'interprète CSS de savoir si un héritage ou une cascade peut être modifié. La réponse courte est donc:

Ne jamais changer className à la volée! -)

Mais en général, vous n'aurez besoin que de changer une propriété ou deux, et cela est facilement implémenté:

function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}

C'est plus facile avec une bibliothèque comme jQuery:

<input type="button" onClick="javascript:test_byid();" value="id='second'" />

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>

Code JavaScript de travail:

<div id="div_add" class="div_add">Add class from Javascript</div>
<div id="div_replace" class="div_replace">Replace class from Javascript</div>
<div id="div_remove" class="div_remove">Remove class from Javascript</div>
<button onClick="div_add_class();">Add class from Javascript</button>
<button onClick="div_replace_class();">Replace class from Javascript</button>
<button onClick="div_remove_class();">Remove class from Javascript</button>
<script type="text/javascript">
    function div_add_class()
    {
        document.getElementById("div_add").className += " div_added";
    }
    function div_replace_class()
    {
        document.getElementById("div_replace").className = "div_replaced";
    }
    function div_remove_class()
    {
        document.getElementById("div_remove").className = "";
    }
</script>

Vous pouvez télécharger un code de travail à partir de ce lien .


Dans l'un de mes anciens projets qui n'utilisaient pas jQuery, j'ai créé les fonctions suivantes pour ajouter, supprimer et vérifier si l'élément a classe:

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, ' ');
    }
}

Donc, par exemple, si je veux que l'onclick ajoute une classe au bouton, je peux utiliser ceci:

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

Pour le moment, il vaudrait mieux utiliser jQuery.


Il suffit de dire myElement.classList="new-class" sauf si vous devez conserver d'autres classes existantes, auquel cas vous pouvez utiliser les méthodes 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>


J'utilise les fonctions JavaScript vanille suivantes dans mon code. Ils utilisent des expressions régulières et indexOf mais n'exigent pas de citer de caractères spéciaux dans les expressions régulières.

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, "");
    }
}

Vous pouvez également utiliser element.classList dans les navigateurs modernes.


Je voudrais utiliser jQuery et écrire quelque chose comme ça:

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

Ce code ajoute une fonction à appeler lorsqu'un élément de l'id d' un élément est cliqué. La fonction ajoute un clic à l'attribut class de l'élément s'il n'en fait pas déjà partie, et le supprime s'il y en a un.

Oui, vous devez ajouter une référence à la bibliothèque jQuery dans votre page pour utiliser ce code, mais au moins, vous pouvez être sûr que la plupart des fonctions de la bibliothèque fonctionneraient à peu près sur tous les navigateurs modernes, ce qui vous fera gagner du temps pour l'implémentation. votre propre code pour faire la même chose.

Merci


Juste pour ajouter des informations d'un autre framework populaire, Google Closures, voyez leur classe dom/classes :

goog.dom.classes.add(element, var_args)

goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)

goog.dom.classes.remove(element, var_args)

Une option pour sélectionner l'élément consiste à utiliser goog.dom.query avec un sélecteur CSS3:

var myElement = goog.dom.query("#MyElement")[0];

Modifier la classe CSS d'un élément avec JavaScript dans ASP.NET :

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

OK, je pense que dans ce cas, vous devriez utiliser jQuery ou écrire vos propres méthodes en JavaScript pur. Ma préférence est d’ajouter mes propres méthodes plutôt que d’injecter tout jQuery dans mon application si je n’ai pas besoin de cela pour d’autres raisons.

Je voudrais faire quelque chose comme ci-dessous comme méthodes de mon framework javascript pour ajouter quelques fonctionnalités qui gèrent l'ajout de classes, la suppression de classes, etc. similaire à jQuery, ceci est entièrement supporté dans IE9 +, mon code est également écrit en ES6 pour vous assurer que votre navigateur le supporte ou que vous utilisez quelque chose comme babel, sinon vous devez utiliser la syntaxe ES5 dans votre code. De cette façon, nous trouvons un élément via ID, ce qui signifie que l'élément doit avoir un ID pour être sélectionné:

//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);
  }

}

et vous pouvez simplement appeler les utiliser comme ci-dessous, imaginez que votre élément ait l'id de 'id' et la classe de 'classe', assurez-vous de les transmettre en tant que chaîne, vous pouvez utiliser l'utilitaire comme ci-dessous:

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');

Voici ma version qui fonctionne parfaitement:

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
}

Usage:

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >

Voici un code jQuery simple pour le faire.

$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});

Ici,

  • Class1 est un auditeur pour un événement.
  • La classe parente est la classe qui héberge la classe que vous souhaitez modifier.
  • Classtoremove est l'ancienne classe que vous avez.
  • La classe à ajouter est la nouvelle classe que vous souhaitez ajouter.
  • 100 correspond au délai d'attente pendant lequel la classe est modifiée.

Bonne chance.


Vous pouvez également étendre l'objet HTMLElement afin d'ajouter des méthodes pour ajouter, supprimer, basculer et vérifier les classes ( 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);
}

Et puis, utilisez simplement ceci (sur click ajoutera ou supprimera une classe):

document.getElementById('yourElementId').onclick = function() {
  this.toggleClass('active');
}

Voici la demo .


Vous pouvez aussi simplement faire:

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

Et pour changer de classe (supprimer s'il existe, sinon ajoutez-le):

document.getElementById('id').classList.toggle('class');

Wow, surpris qu'il y ait tellement de réponses exagérées ici ...

<div class="firstClass" onclick="this.className='secondClass'">




dom