11550 sujets

JavaScript, DOM et API Web HTML5

Appeller une fonction JS grâce à la feuille de style

Bonjour Smiley smile

Après avoir lu le titre vous allez me dire : "Mais il est fou ? Smiley eek "
Mais non rooh ! Laissez moi vous donner un exemple...

Je souhaite appeller une fonction javascript sans toucher au code HTLM grâce à CSS, toutes les bidouilles sont envisageables...

Exemple de bricolage auquel j'avais pensé :

HTML
<head>
<script language="javascript">

function test() { // fonction à appeller
... }

</script>
</head>

<body>

[...]

<div id="exemple">
     <img src="..." onLoad="test()">
</div>

CSS
#exemple {
display:none; /* cache la div, donc pas d'image, donc pas d'appel */
/* display:inline; affiche la div, donc image, donc appel */

Mais ça ne fonctionne pas, car display:none n'affiche pas le contenu de la div dans le navigateur mais le code est présent dans la source, donc la fonction JS est quand même appellée. Smiley decu

J'ai essayé avec visibility:hidden, mais même problème. Il faut donc trouver un moyen de cacher l'appel à fonction dans le code HTML, comment faire ?

Merci à tous pour vos idées Smiley cligne
Modifié par BeliG (05 Jun 2007 - 18:00)
Dans ton html, sur ton lien texte par exemple, tu inscris un truc du genre:


<a onclick="document.getElementById('idDuDivAMasquer').style.display='none'"><b>Fermer</b></a>
Je pense que le css est interprété à la fin du chargement de la feuille de style.
Tu ne verras donc pas clignoter ta div, elle sera mise en inline directement Smiley smile
pour cacher l'appel de la fonction tu peux toujour utiliser

Event.observe($('exemple'),'load',test);

ceci grace a prototype, et ton evenement n'apparaitrera pas dans le HTML
cependant ta fonction test ne (doit) prend(re) aucun argument !
donc si tu veux l'id de l'element qui declenche l'evenement

function test(e)
{
element=Event.findElement(e,'div');
id_element=element.id;
//traitement
//....
}

voila ce devrait marcher ^^ tu peux toujours mettre ddes alert pour verfifier l'id

pour plus d'info
Bonjour et merci à vous pour vos réponses Smiley smile

@L-0sWald : ta solution ne me convient pas. Le visiteur du site ne doit cliquer nul part, c'est au webmaster de déterminer si oui ou non il active le script (c'est un script qui modifie le design, le fichier html est utilisé pour plusieurs sites où seule la feuille de style est différente).

@applemac : euh... j'ai pas trop compris (ou alors c'est toi qui n'a pas saisi ma question) Smiley langue

J'ai pensé à un autre (gros) bricolage : mettre une couleur en fond de la div et la tester ensuite dans le script... J'ai pensé aux couleurs mais il doit surement y avoir une solution plus "propre".

EDIT : @hakkou : merci beaucoup, j'étudie ta solution Smiley cligne

Merci à ceux qui s'intéresseront à mon problème Smiley smile
Modifié par BeliG (06 Jun 2007 - 09:53)
Modérateur
Salut,

Belig a écrit :
Il faut donc trouver un moyen de cacher l'appel à fonction dans le code HTML, comment faire ?
En lisant les tutos ? Smiley cligne

hakkou a écrit :
ceci grace a prototype,
Et sans, comment fais-tu ? Y'a-t-il vraiment besoin de 100ko de JS pour cacher un appel de fonction ? Smiley rolleyes
euh je savais que t'aller me reprendre la dessus Smiley cligne
dans mon stage on m'a dit d'utiliser ca ba je la fait ^^'
aprés libre a lui de choisir la solution qui conviendra le mieu Smiley biggrin
Modérateur
ben... Event.observe correspond en gros à ceci :
function addEvent(oElem, sEvType, fn, bCapture)
{
   return oElem.addEventListener?
      oElem.addEventListener(sEvType, fn, bCapture):
      oElem.attachEvent?
         oElem.attachEvent('on' + sEvType, fn):
         false;
}

function test()
{
   alert('coucou !');
}

addEvent(window, 'load', test, false);
donc c'est mieux de privilégier ce bout de code plutôt qu'inclure toute une bibliothèque... Pour la sélection, les getElementsByTagName et getElementById suffisent la plupart du temps.

a écrit :
cependant ta fonction test ne (doit) prend(re) aucun argument !

Si tu peux. Smiley cligne

exemple :
function test(oEl, oClass, e)
{
   ...
}

addEvent(window, 'load', function(e) { test(arg1, arg2, e); }, false);
koala64 a écrit :

cependant ta fonction test ne (doit) prend(re) aucun argument !

Si tu peux. Smiley cligne

exemple :
function test(oEl, oClass, e)
{
   ...
}

addEvent(window, 'load', function(e) { test(arg1, arg2, e); }, false);

c'est ce que je fait ^^ quand je disait qu'elle ne prenait pas d'argument je parlais au niveau de la syntaxe du Event.observe ^^
Modérateur
Vu qu'Event.observe est équivalent à la fonction addEvent, on ferait comme ceci pour passer des arguments à la fonction test...
Event.observe(
   window,
   'load',
   function(e)
   {
      test(arg1, arg2, e);
   }
);
Re,
koala64 a écrit :
En lisant les tutos ? Smiley cligne
Tuto intéressant, mais quel rapport avec mon problème ? Smiley lol

Je me cite : c'est au webdesigner de déterminer si oui ou non le script doit être appellé (c'est un script qui modifie le design, le fichier html est un template utilisé pour plusieurs sites, seule la feuille de style est différente et MODIFIABLE).

J'ai testé ma solution des couleurs en utilisant background-color côté CSS et .style côté JS :

#test {
color:#cccccc; 

alert(document.getElementById("test").style.color);

...

<div id="test"></div>

Mais .style ne semble fonctionner que si on passe un style de cette façon :
<div id="test" style="color:#cccccc;"></div>

Donc de nouveau à la recherche d'idées fraiches...

Au passage, j'suis un peu perdu par le code de vos derniers post, si vous pensez que ça peut m'aider il serait bon de détailler un minimum et éviter de balancer du code brut de pomme Smiley smile Merci
Modifié par BeliG (06 Jun 2007 - 11:55)
BeliG
pour ton cas tu peux definir des class dans ton CSS et ensuite quand l'utilisateur veut changer il suffit juste de changer de class ^^ en gros t'aura des style predefini
koala64 a écrit :
ben... Event.observe correspond en gros à ceci :
function addEvent(oElem, sEvType, fn, bCapture)
{
   return oElem.addEventListener?
      oElem.addEventListener(sEvType, fn, bCapture):
      oElem.attachEvent?
         oElem.attachEvent('on' + sEvType, fn):
         false;
}

function test()
{
   alert('coucou !');
}

addEvent(window, 'load', test, false);
donc c'est mieux de privilégier ce bout de code plutôt qu'inclure toute une bibliothèque... Pour la sélection, les getElementsByTagName et getElementById suffisent la plupart du temps.


Bonjour,

Tout à fait d'accord.

Sinon il existe behavior:expression() sous IE, mais c'est propriétaire
Sujet clos
Aller à