11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Supprimer plusieurs classes et les remplacer

Bonjour,

Je me permets de vous contacter car j'aimerais, en JavaScript, supprimer et remplacer 2 classes d'une divmais je n'y parviens pas.

En effet, c'est un besoin ponctuel qui m'oblige à utiliser JavaScript (que je ne maîtrise guère) pour parvenir à mes fins. Pour information, je n'ai pas accès au code HTML donc supprimer et remplacer les classes est compliqué pour moi.

J'aimerais supprimer les classes col-xs-12 col-md-6 et les remplacer par col-1 et col-2.

Code HTML actuel :


<div class="container">
    <div class="post col-xs-12 col-md-6 space-between">
        <div>
            Contenu
        </div>
    </div>
</div>


Code HTML souhaité :


<div class="container">
    <div class="post col-1 col-2 space-between">
        <div>
            Contenu
        </div>
    </div>
</div>


En JavaScript, sauriez-vous me dire comment faire ?
J'ai lu un article qui fait mention de 
Element.classList


Pourriez-vous me mettre sur la piste ?

Merci de votre aide Smiley smile
Salut,
En js c'est pas bien compliqué
je vais utilisé jquery pour ça 

$elem = $(".container > div.col-xs-12");
$elem.removeClass("col-xs-12 col-md-6").addClass("col-1 col-2");
Salut

Dans ce lien voir la méthode remove().

document.querySelector('.container > .post').classList.remove('col-xs-12', 'col-md-6');

Modifié par danielhagnoul (08 Mar 2019 - 22:48)
Bonjour,

Merci de vos messages Smiley smile

Je vais tester et voir si, grâce à votre aide, je parviens au résultat souhaité.
Bonjour,

J'ai essayé les deux bouts de code.
J'ai créé un fichier JS et j'ai collé :

$elem = $(".container > div.col-xs-12");
$elem.removeClass("col-xs-12 col-md-6").addClass("col-1 col-2");


Le message d'erreur dans la console est TypeError: $ is not a function


J'ai remplacé le code ci-dessus par

document.querySelector('.container > .post').classList.remove('col-xs-12', 'col-md-6');


Le message dans la console est TypeError: document.querySelector(...) is null

Auriez-vous une piste à me donner ?

Merci de votre aide Smiley smile
Modérateur
Salut !

Pour utiliser 
$elem = $(".container > div.col-xs-12");
$elem.removeClass("col-xs-12 col-md-6").addClass("col-1 col-2");

Il te faut importer JQuery (JENCAL a dit qu'il l'utilisait dans son post mais tu ne savait peut etre pas comment).

Pour Query selector je ne sais pas trop.

Je te propose une autre façon de faire :

let class_colxs12 = document.getElementsByClassName('col-xs-12');
let class_colmd6 = document.getElementsByClassName('col-md-6');

removeadd(class_colxs12);
removeadd(class_colmd6);

function removeadd(elements) {
  Array.prototype.forEach.call(elements, function(el) {
      el.classList.remove('col-xs-12', 'col-md-6');
      el.classList.add('col-1', 'col-2');
      console.log(el);
  });
}


https://jsfiddle.net/undless/yf8aqnvp/5/

Il manque cependant les indications comme :
- Est-ce que il peut y avoir seulement une des deux classes col-xs-12 col-md-6 ou tout le temps les deux ?
- Est-ce que ces classes sont utilisées ailleurs dans le code et est-ce qu'il faut limiter ce traitement à cet endroit spécialement ?
Bonjour,

Merci de ta réponse Smiley smile

Le code de JENCAL doit-il être précédé par :


jQuery(document).ready(function(){
   // Code de JENCAL
});


Aussi, pour répondre aux 2 questions présentent à la fin de ton message :

- Est-ce que il peut y avoir seulement une des deux classes col-xs-12 col-md-6 ou tout le temps les deux ?
Elles sont indissociables. Elles vont de paire.

- Est-ce que ces classes sont utilisées ailleurs dans le code et est-ce qu'il faut limiter ce traitement à cet endroit spécialement ?
Les classes sont utilisées ailleurs sur le site. Il faut limiter l'action du code à une page précise. Pour la cibler, le body de cette page a la classe "body.categorie-3"

En regardant le code que tu envoies, je me demande s'il est possible de cibler les classes "col-xs-12 col-md-6" contenu dans le container, lui même contenu dans body.categorie-3 ?


<body class="categorie-3">
    <div class="container">
        <div class="post col-1 col-2 space-between">
            <div>
                Contenu
            </div>
        </div>
    </div>
</body>


Merci de ton aide Smiley smile
Modifié par MickFR (15 Mar 2019 - 11:13)
Modérateur
MickFR a écrit :

Le code de JENCAL doit-il être précédé par :


jQuery(document).ready(function(){
   // Code de JENCAL
});



Oui, mais pas que Smiley langue
Ce bout de code te permet de n’exécuter le code JS qu'il y a dedans seulement quand le DOM sera prêt. Ça évite que lorsque la page est trop longue a charger, ton Js commence a chercher des éléments qui ne sont pas encore présent (et qu'il bug du coup).

Pour faire fonctionner le code avec JQuery il faut en plus importer la bibliothèque :

- Soit la télécharger et l’insérer toi même : https://jquery.com/download/
- Soit passer par un CDN externe et donc juste coller dans le <head> cette ligne :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



MickFR a écrit :

- Est-ce que il peut y avoir seulement une des deux classes col-xs-12 col-md-6 ou tout le temps les deux ?
Elles sont indissociables. Elles vont de paire.

- Est-ce que ces classes sont utilisées ailleurs dans le code et est-ce qu'il faut limiter ce traitement à cet endroit spécialement ?
Les classes sont utiliser ailleurs sur le site. Il faut limiter l'action du code à une page précise. Pour la cibler, le body de cette page a la classe "body.categorie-3"


Super pour les réponses ça précise bien.

Du coup je te propose un truc comme ça :

if (document.body.classList.contains('categorie-3')) {

  let class_colxs12 = document.getElementsByClassName('col-xs-12');

  Array.prototype.forEach.call(class_colxs12, function(el) {
    el.classList.remove('col-xs-12', 'col-md-6');
    el.classList.add('col-1', 'col-2');
    console.log(el);
  });
  
}


https://jsfiddle.net/undless/yf8aqnvp/9/
Meilleure solution
Modérateur
Oups j'ai oublié d'enlever les console.log() du code Smiley lol Tu peux les enlever c'est juste pour afficher les résultats dans la console pour tester.

Bonne journée
Bonjour,

En effet, j'ai enlevé les console.log(), merci Smiley smile

Sans vouloir abuser...

En JavaScript, j'ai lu qu'il est possible de renseigner l'attribut alt d'une image.
J'utilise WordPress et l'attribut alt d'une image (le logo) n'est pas renseigné.

Actuellement, en inspectant le code source, j'ai ceci :


<img width="291" height="100" src="http://www.adresse-du-site/images/logo.png" class="logo dark" alt="" itemprop="logo">


En JavaScript, serait-il possible de faire quelque chose comme ceci :


document.getElementsByClassName("logo").alt = "mon texte alternatif";


En amont, faut-il créer une variable ou autre avant de saisir ce bout de code ?

Merci encore Smiley smile
Modifié par MickFR (16 Mar 2019 - 12:35)
Modérateur
Salut,

MickFR a écrit :
En JavaScript, j'ai lu qu'il est possible de renseigner l'attribut alt d'une image.
On peut (presque) tout faire en Js Smiley langue

MickFR a écrit :
J'utilise WordPress et l'attribut alt d'une image (le logo) n'est pas renseigné.
Tu utilise un thème qui le permet ? De base il me semble qu'il n'y a pas de logo du coup ca a du être fait autrement que nativement et il doit y avoir un moyen de rentrer le alt autrement qu'en Js.... tu le sélectionne dans la bibliothèque de médias ?

MickFR a écrit :
En JavaScript, serait-il possible de faire quelque chose comme ceci :

Un petit conseil qui te servira, tu vas sur une moteur de recherche et tu tapes "Js alt attribute" par exemple. Tu tombes généralement sur des spec de W3School ou MDN c'est parfait. Là le premier lien c'est https://www.w3schools.com/jsref/prop_img_alt.asp la définition même que tu cherches.

Deuxième exemple de la page :
document.getElementById("myImg").alt = "newAlternateText";


Je ne sais pas si c'est du manque de confiance, de l'apprentissage ou de la flemme hahahah mais en tout cas sur des choses comme ça tu peux t'en sortir tout seul je pense Smiley lol

MickFR a écrit :
En amont, faut-il créer une variable ou autre avant de saisir ce bout de code ?

Tu peux créer une variable si jamais tu compte réutiliser l'élément en question. Ca évite de relancer une recherche à chaque fois, c'est plus simple a comprendre etc. Mais si tu ne le fais qu'une fois ce n'est pas obligé (mais ca reste joli).

var logo = document.getElementById("myImg");
logo.alt = "newAlternateText";


Allez bon code Smiley lol

Bisous
Modifié par _laurent (16 Mar 2019 - 17:18)
Salut,

Merci de ta réponse Smiley smile
Très sincèrement, je ne sollicite pas de l'aide par flemme, dans l'espoir que la solution me tombe toute cuite dans le bec Smiley ravi En JavaScript, j'essaie de me dépatouiller pour parvenir à mes fins... Il est vrai que demander l'avis de personnes qui maîtrisent est rassurant Smiley lol . Je comprends ton interrogation/remarque et le conseil de faire une recherche Google (ou autre) est tout à fait avisé. Surtout au vu de la nature de ma question, je suis d'accord.

Tu utilise un thème qui le permet ? De base il me semble qu'il n'y a pas de logo du coup ca a du être fait autrement que nativement et il doit y avoir un moyen de rentrer le alt autrement qu'en Js.... tu le sélectionne dans la bibliothèque de médias ?

Le logo est effectivement ajouté grâce au thème choisi.
Ledit logo est sélectionné dans la bibliothèque des médias (j'ai veillé à renseigner les champs description et texte alternatif). Malgré cela, l'attribut alt est vide lorsque j'inspecte le code.

Le logo n'ayant pas d'ID, je vais essayer avec :
querySelector


Merci de ton aide:)
Modérateur
MickFR a écrit :
Très sincèrement, je ne sollicite pas de l'aide par flemme, dans l'espoir que la solution me tombe toute cuite dans le bec

Yes je me doute bien, je te taquine ! Smiley lol

MickFR a écrit :
Le logo est effectivement ajouté grâce au thème choisi.
Ledit logo est sélectionné dans la bibliothèque des médias (j'ai veillé à renseigner les champs description et texte alternatif). Malgré cela, l'attribut alt est vide lorsque j'inspecte le code.

Ah ! Bah du coup c'est un fail du thème.

MickFR a écrit :
Le logo n'ayant pas d'ID, je vais essayer avec :
querySelector

Yes tu peux. Ou en enchaînant les "getElementby" (getElementById getElementsByClassName getElementsByTagName). N'hésite pas a faire un autre topic si tu coinces a nouveau plutot que de le rajouter sur un topic "résolu" Smiley smile (c'était un peu un coup de bol que je passe dessus !)

Bonne continuation ! Smiley cligne
Merci Smiley ravi

Je vais essayer de m'en sortir.
Si c'est trop laborieux, je créerai un nouveau topic Smiley lol

Bon après-midi
Sujet clos
Aller à