Discussion :

[patricktoulon]

bonjour a tous

je voudrais appliquer le css d'une des classe a un element

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.slide {
 border: 1px solid rgb(240, 240, 240);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(220, 220, 220, 0) 44%, rgba(33, 180, 226, 1) 53%, rgba(220, 220, 220, 0) 63%);
 margin-top: 5px;
 user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
}
.fondg {
 border: 1px solid rgb(240, 240, 240);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255, 0, 0, 0) 44%, rgba(33, 180, 226, 1) 53%, rgba(220, 220, 220, 0) 63%);
 margin-top: 5px;
 user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
}

l'element

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="fond6"  class="fondg slide" style="position:relative;width:300px;height:26px;overflow:none;" >
         <div id="curseur6" class="curbis" style="position:absolute;top:1px;width:26px;height:26px;border-radius:8px;" unselectable="on"></div>
      </div>

j'ai plusieurs support(explorer) IE, FF ,Chrome, OCX ,Webbrowser VBA Excel
le dernier ne reconnaissant pas la fonction classList je ne peux donc pas m'en servir pour lister et replacer

comment devrais je faire pour que fond6 prenne le style fondg ?

j'ai pensé d'abords a carrément changer la classe element.className="fondg"
sauf que probleme dans le reste du code je boucle avec getElementByClassName("slide") donc changer la classe serait fatal au reste du code

des idées ??

[psychadelic]

Parce c'est toi....

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function hasClass(el, className)
{
    if (el.classList)
        return el.classList.contains(className);
    return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}
 
function addClass(el, className)
{
    if (el.classList)
        el.classList.add(className)
    else if (!hasClass(el, className))
        el.className += " " + className;
}
 
function removeClass(el, className)
{
    if (el.classList)
        el.classList.remove(className)
    else if (hasClass(el, className))
    {
        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
        el.className = el.className.replace(reg, ' ');
    }
}

(pompé sur StacOverFlow ( )
usage :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
var el = document.getElementById('peace');
addClass(el, 'be-still');
// or
removeClass(el, 'be-still');

la question suivante est : est-ce que le Webbrowser VBA Excel integre la manipulation d'expression régulières ?

[patricktoulon]

re
Bonjour psychadelic

merci pour le retour
mais j'ai pourtant preciser que

le dernier ne reconnaissant pas la fonction classList je ne peux donc pas m'en servir pour lister et replacer

autrement dit si il y a classList dans le code amoins que se soit une variable ca plante

sinon je n'aurais pas poster de demande j'avais l'exemple de Nosmoking puis j'ai enregistréen pdf la page w3scool sur cette fonction

oui le webbrowser integre le regex ya pas de soucis son noyeau est basé sur IE 09 et utilise les librairies du IE installé ce qui fait que j'ai des incompatibilités incompréhensibles des fois mais comme je le connais j'arrive a mes fins

je crois que je vais etre obligé de memoriser les classe et faire un switch du split ou utiliser les matchs d'un regex avec un pattern determiné par les chaine+espaces
c'est pas jolie mais bon
je vais voir si je peux me debrouiller autrement pour les boucles sur la classe "slider" ca simplifiera les choses

merci

[patricktoulon]

re
c'est bon j'ai trouvé un moyen je me sert des attributs
<div id="fond6" class="slider" cl1="slider" cl2="slider2" .............
et je switch dans le code
element.className=element.getAttribute("cl2") //ou cl1

pour te donner une idée des probleme avec vba exel

si je fait un alert (element.classList[2]);
il me donne bien la classe 2
mais les fonctions add et remove de classList walouh walouh
bon ben j'ai resolu avec les attributs

[psychadelic]

mais j'ai pourtant préciser que

le dernier ne reconnaissant pas la fonction classList je ne peux donc pas m'en servir pour lister et replacer

autrement dit si il y a classList dans le code a moins que se soit une variable ça plante

Le code que j'ai mis fonctionne tres bien si la méthode classList n'est pas implémenté...

les fonctions en questions font justement le test :
if (el.classList)
qui permet de vérifier si la méthode est implémentée ou non.

sinon tu peux toujours retirer ce test dans le code

if (el.classList)
el.classList.........
else

mais ce serai une sorte de nivellement par le bas...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function hasClass(el, className) {
  return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}
 
function addClass(el, className) {
  if (!hasClass(el, className))
    el.className += " " + className;
}
 
function removeClass(el, className) {
  if (hasClass(el, className)) {
    var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
    el.className = el.className.replace(reg, ' ');
  }
}

allez, vite fait...

[patricktoulon]

je vais en faire un avec cette methode

voir si avec x slider de differents style dans le meme document ca fonctionnent au vue de la simplicité du code je pense que oui
ca fait une fonction en plus c'est tout

je reviens un peu plus tard je dois aller chercher enfin ma totomobil au garage elle est enfin prete
merci a+

[Watilin]

@patrick,

la solution de psychadelic marchera sûrement, je lui fais confiance
Mais tu peux approcher le problème autrement. J’ai vérifié les tables de compatibilité de getElementsByClassName et querySelectorAll. Là où tu peux utiliser la première, tu peux utiliser la seconde.

Entre ces deux méthodes, il y a une différence subtile, mais importante : getElementsByClassName renvoie une collection dynamique, alors que querySelectorAll renvoie une collection statique. Voir la doc de NodeList pour (un peu) plus d’infos.

La collection dynamique est plus efficace en termes de performances (du moins il paraît, je ne trouve plus mes sources), mais elle pose le problème que tu as rencontré : si tu modifies un des éléments de la collection en cours de route, ton parcours de boucle va être perturbé.

querySelectorAll n’a pas ce problème