Appliqu� un classe css � un �l�ment

Version imprimable

bonjour a tous

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

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:

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 ??

Parce c'est toi.... :kiss: :mrgreen:

Code:

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 ( :roi: )
usage :

Code:

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 ?

02/03/2018, 15h27
patricktoulon

re

re
Bonjour psychadelic

merci pour le retour
mais j'ai pourtant preciser que

Citation:

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;)
02/03/2018, 16h07
patricktoulon

re

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 walouh8O
bon ben j'ai resolu avec les attributs:D

Citation:

Envoy� par patricktoulon

mais j'ai pourtant pr�ciser que

Citation:

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�... :roll:

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. 8-)

sinon tu peux toujours retirer ce test dans le code

Citation:

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

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

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... :roll:

02/03/2018, 17h18
patricktoulon

re

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+:chin:
02/03/2018, 19h57
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 ;)