11548 sujets

JavaScript, DOM et API Web HTML5

Pages :
(reprise du message précédent)

Là, c'est BEAUCOUP plus simple! Smiley langue
Il suffit de modifier en javascript la valeur de backgroundColor de l'élément BODY.
Aide-toi et Google t'aidera!

Pour en revenir à la couleur des liens, je crois aussi que les valeurs sont mémorisées au niveau du navigateur installé sur le poste client. Javascript n'y a pas accès par mesure de sécurité.
Modifié par lddsoft (27 Jun 2011 - 20:09)
Bonsoir à toutes et à tous,

j'ai fait quelques essais, d'abord en cherchant sur google, puis en fouillant dans la DOM, sans véritablement trouver une quelconque information sur la remise à défaut des couleurs des liens.

Je pense sans trop me tromper que ces informations sont stockées dans le CACHE du navigateur et que l'on a pas accès même par le langage javascript.

De plus, j'ai constaté que si un lien est modifié (un clic par exemple), seul le navigateur qui a vu ce changement stockera cette information. Si vous allez dans un autre navigateur, le lien aura toujours la couleur d'origine (celle de a:link).

Donc il n'y a pas de solutions à ce problème.

@+
La seule solution est de définir par le style quelles couleurs seront attribuées aux liens en fonction de leur état.
D'ailleurs, en fin de compte, je ne vois pas trop l'intérêt de récupérer (pour autant que ce soit possible de le faire) les valeurs par défaut du navigateur Smiley rolleyes .
Bonsoir à toutes et à tous,

les valeurs par défaut, pour moi, sont celles déclarées dans la feuille de styles.

Ce sont ces valeurs par défaut que ANTWA désire ré-appliquer lorsqu'il appuie sur son BOUTON.

Mais comme, je suppose qu'il n'y a pas de solutions à ce genre de problème, je ne vois pas quoi dire d'autre. Smiley decu

@+
Modifié par Artemus24 (27 Jun 2011 - 20:50)
Bonjour,

Voici une piste qui devrait mener vers la solution. Seulement, elle fait appel à jQuery et le tutoriel est en anglais. (j'espère que Antwa ne s'est pas écroulé Smiley smile ).

Je crois que c'est jouable, mais je trouve cela très lourd pour bien peu de choses.
Voici l'adresse en question: Dynamic CSS pseudo class styles with jQuery.
N'hésitez pas à voir la démo!
Modifié par lddsoft (28 Jun 2011 - 11:51)
Merci pour l'attention souriante !
et aussi pour la recherche, c'est intéressant.
La démo en jQuery est en effet probante.

J'ai bien essayé de faire pareil sur KompoZer
où l'on peut mettre des évènements javascript sur
des liens, mais n'ai jamais trouvé la valeur juste à
mettre sur l'attribut 'onemousover' par exemple pour qu'il se passe quelque chose !
C'est dommage qu'il n'y a aucun tutoriel sur cette boîte
alors que c'est là depuis bien 10 ans, sur Nvu et peut-être même avant.
Je devrai plutôt en parler sur le forum de Mozilla !

Pour en revenir à notre question d'objet lié à une fonction,
ce qui fait quand même le fond du javascript et ensuite des évolutions css, jQuery, ...
si je comprends bien la subtilité du rapport entre objet et fonction,
c'est le sigle () qui fait le lien de l'un à l'autre...

J'ai pensé que pour bien comprendre cette relation entre objet et fonction js liée à cet objet je pourrais faire quelque chose de plus simple:
un bouton qui change le backgroundcolor.

Je trouve peu de doc là dessus dans les tutoriaux, qui parlent plutôt de fonction, de script en tant que tel...
Merci de m'indiquer ce qui vous semble mal formulé dans le script joint: :roll:

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>essai 7</title>
<script language="javascript">
function changercouleur()
{
document.backgroundcolor="black";
document.backgroundcolor="#000000";
}
</script>
</head>
<body style="color: rgb(0, 0, 0); background-color: rgb(204, 153, 255);"
<br>
<br>
<form> <input value="Changer la couleur de la page"
onclick="changercouleur();" type="button"> </form>
</body>
</html>
En fait, les () après le nom de la fonction servent à accueillir le/les paramètre(s) ou argument(s) envoyé(s) à la fonction lorsqu'on fait appel à elle.
Si, par exemple j'appelais la fonction en faisant ... onclick="changer_couleur('#000000');" ..., j'envoie le paramètre #000000 (= noir) à la fonction, qui le récupère dans couleur (par exemple): function changer_couleur(couleur){...}

Pour en revenir à ton code, tu ne respectes pas la syntaxe (par ignorance de celle-ci sans doute).
Voici ce que ton code donne (sans erreur et valide) :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>essai 7</title>
    <script type="text/javascript">
	function changercouleur()
	{ 
		document.getElementsByTagName("body")[0].style.backgroundColor="black";
	} 
    </script>
  </head>
  <body style="color: rgb(0, 0, 0); background-color: rgb(204, 153, 255);">
    <div style="margin-top:30px;">
    <form action="#">
      <input value="Changer la couleur de la page" onclick="changercouleur();" type="button">
    </form>
	</div>	
  </body>
</html>

Modifié par lddsoft (28 Jun 2011 - 13:44)
Bravo ! Ça fonctionne ! Super merci !

- Juste un mot sur 'getElementsByTagName' , c'est une expression insécable qui veut dire: rechercher élément par son nom , ici "body", on pourrait mettre "link" ou "img" etc...
- Qu'est ce que veut dire le '[0]' juste après ?

J'ai embrayé jusque là :
Cela ne marchait pas avec 'function 1changercouleur()'
mais avec le chiffre en bout, ça marche !!!
Le truc c'était quand même de dire <form action="#">
Ce qui n'était pas dit auparavant.
Le # est-il réservé pour indiquer couleur ?

Thanks! Smiley smile

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
  
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>essai 8</title>
 
  <script type="text/javascript"> 
    function changercouleur1() 
    {  
        document.getElementsByTagName("body")[0].style.backgroundColor="black"; 
    } 
    
   function changercouleur2()
   {
       document.getElementsByTagName("body")[0].style.backgroundColor="white";
   }  
    </script>
</head><body style="color: rgb(0, 0, 0); background-color: black;">
<div style="margin-top: 30px;">
<form action="#"> 
<input value="Changer la couleur de la page 1" onclick="changercouleur1();" type="button"> 
</form>
<form action="#">
<input value="Changer la couleur de la page 2" onclick="changercouleur2();" type="button"> 
</form>
</div>
</body></html>
Antwa a écrit :
Cela ne marchait pas avec 'function 1changercouleur()'

C'est un exemple de nom de fonction invalide : il ne peut pas commencer par un chiffre. Smiley cligne
Antwa a écrit :
Le truc c'était quand même de dire <form action="#">

Non, l'attribut action est là pour rendre le code "valide" et n'a strictement rien à voir avec les couleurs en hexadécimal comme "#000000".
Fais une petite recherche sur l'élément "form" et ses attributs. Il y a beaucoup à apprendre Smiley sweatdrop !

Antwa a écrit :
on pourrait mettre "link" ou "img" etc

Tu ne peux utiliser que des noms de balises (Tag en anglais). "link" est une balise, mais il ne faut pas confondre avec la balise "a" !!

Pour en venir à ton dernier code, tu as raté l'occasion de mettre en pratique ce que je t'avais expliqué sur les () et les paramètres passés. Smiley decu En fait, tu n'avais pas besoin de créer 2 fonctions. Mais je te laisse trouver par toi-même Smiley smile .

Après ta recherche sur "form", fais-en également une sur document.getElementsByTagName("body")[0]. C'est bon pour l'apprentissage Smiley cligne

A++
Pages :