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