Changer un attribut d'un tag html depuis un textfield

Changer un attribut d'un tag html depuis un textfield - HTML/CSS - Programmation

Marsh Posté le 12-12-2002 à 01:07:02    

Je sais pas si je suis clair...
 
En gros je veux faire une sorte de prévisualisation instantanée du look de mon forum... Donc par exemple j'ai couleur de fond, je tape dans le champ en question la valeur #FFFFFF et hop ca apparait direct sur ma preview sans recharger la page ni rien...
 
En gros c ca (mais le code qu'on m'a gentillement donné correspond pas trop à ce que je cherche) :
 
http://federalnetwork.free.fr/admin.htm
 
Suffit de changer la valeur du RGB et ca change la couleur dans le forum... sauf que moi le RGB ca m'intéresse po, et que actuellement c pas vraiment ma couleur de fond de l'entête de mon forumy qui est changée.... :(

Reply

Marsh Posté le 12-12-2002 à 01:07:02   

Reply

Marsh Posté le 12-12-2002 à 11:03:05    

Par exemple pour changer le fond :
 
ton_element.style.backgroundColor = document.ton_formulaire.ton_champ.value;
 
Et tu appelles ça à partir d'un bouton par exmple (avec un onclick)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 12-12-2002 à 14:24:04    

ah eux oui pardon j'ai pas été bien clair... euh déjà faut détailler pour moi :D suis un noob ;)
 
Hum sinon faudrait plutôt utiliser des name ou qqch comme ca, comme tu peut le voir sur ma page, je cherche à faire qqch qui ressemble à ca : http://forum.hardware.fr/setperso.php3
 
en moins compliqué (ouais car j'ai regardé le code, fui !)

Reply

Marsh Posté le 12-12-2002 à 14:36:39    

Bah c'est pas bien compliqué.
 
Imaginons que tu aies un élément comme ça :
 

<div id="plop"> ... </div>


 
et que tu veuilles changer sa couleur de fond. Tu vas d'abord utiliser ce genre de formulaire :
 

<form id="form_plop">
  <input type="text" name="couleur">
  <button type="button" onclick="document.getElementById('plop').style.backgroundColor=document.form_plop.couleur.value;">Changer la couleur de l'élément "plop"</button>
</form>


 
Le getElementById('plop';) permet de récupérer l'élément dont l'id est "plop".
 
Après à toi d'adapter et de rendre ça plus générique...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 12-12-2002 à 14:48:56    

oky, donc ca changera la couleur de fond de mon élément c ca ?
 
je vais essayer ton script suis pas très bon donc...
 
et si je faisais ca par CSS ?

Reply

Marsh Posté le 12-12-2002 à 14:53:08    

Ca marche po :(

Code :
  1. <form id="form_plop">
  2. <input type="text" name="couleur">
  3. <button type="button" onclick="document.getElementById('plop').style.backgroundColor=document.form_plop.couleur.value;">Changer la couleur de l'élément "plop"</button>
  4. </form>
  5. <div id="plop">ceci est un test ;)</div>


 
Erreur : 'document.form_plop.couleur' a la valeur NULL ou n'est pas un objet.
 

Reply

Marsh Posté le 12-12-2002 à 15:13:39    

Oui, en fait il n'y a même pas besoin de formulaire :
 

<input type="text" size="10" maxlength="6" id="couleur" />  
<button type="button" onclick="document.getElementById('plop').style.backgroundColor='#'+document.getElementById('couleur').value;">Changer la couleur de fond</button>


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 12-12-2002 à 15:21:19    

oky merci bien ca marche au poil !
 
Juste un détail : ca marche que pour la couleur de fond c ca ?
 
seulement j'ai aussi des couleurs de police, des bordures de tableau et des couleurs de liens à changer...
 
On peut lui faire faire ca à ton script ?

Reply

Marsh Posté le 12-12-2002 à 15:29:29    

Tu trouveras la liste des propriété de style modifiable par JavaScript ici :
 
http://www.mozilla.org/docs/dom/do [...] ml#1002335
 
(bon c'est un lien vers Mozilla mais ça marche aussi pour les dernières versions de IE et Opera)
 
couleur du texte => color
couleur de bordure => borderColor
etc...
 
Après à toi de voir, soit tu crées autant de boutons que de propriétés que tu veux modifier soit tu mets tes propriétés dans un liste déroulante (par exemple) afin de ne pas se retrouver avec trop de boutons.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 12-12-2002 à 15:36:12    

Merci bien... donc je vais devoir faire un script par élément à changer si je capte bien.. rooo ca va faire une grosse page :D
 
Pas grave en fait c une page d'admin elle sera pas chargée souvent et surtout... ca simplifie tellement la vie que ils vont pas me casser les machins si ca met 5 secondes à charger ;)
 
je te donne des nouvelles si jamais ca marche (et t'en auras forcément si ca marche pas :D :D :D)
 
Merci bicou !!!

Reply

Marsh Posté le 12-12-2002 à 15:36:12   

Reply

Marsh Posté le 12-12-2002 à 15:38:59    

Au pire si tu as beaucoup d'élément tu peux là aussi créer une liste déroulante qui contiendra tous les id des éléments modifiables.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 12-12-2002 à 15:47:49    

voui c vrai, mais le but c de configurer rapidement son forum, donc si faut se prendre la tête avec une liste déroulante...
 
Pi bon c pas terminé, car une fois que ca marchera en html, faudra rajouter la gestion du php, en particulier : sauver les données (facile ca) et les récupérer quand on charge la page ; ca risque d'être plus chiant ca ;) quoique, pas certain. :whistle:

Reply

Marsh Posté le 13-12-2002 à 02:34:06    

héhéhhé, ca marche mais ca marche pas :D
 

Code :
  1. <input type="text" size="10" maxlength="6" id="color"> 
  2. <button type="button" onclick="document.getElementById('TitleBGColor').style.backgroundColor='#'+document.getElementById('color').value;">Change</button>


 
Ca on est ok ;)
 
Ensuite ca se complique :
 

Code :
  1. <tr valign="top">
  2.  <td align="left" width="18" bgcolor="<!fTitleBGColor>" id="TitleBGColor"> </div></td>
  3.  <td align="left" bgcolor="<!fTitleBGColor>" id="TitleBGColor"><b><font color="<!fTitleTColor>">Boards</font></b></td>
  4.  <td align="center" width="60" bgcolor="<!fTitleBGColor>" id="TitleBGColor"><b><font color="<!fTitleTColor>">Topics</font></b></td>
  5.  <td align="center" width="60" bgcolor="<!fTitleBGColor>" id="TitleBGColor"><b><font color="<!fTitleTColor>">Posts</font></b></td>
  6.  <td align="center" width="170" bgcolor="<!fTitleBGColor>" id="TitleBGColor"><b><font color="<!fTitleTColor>">Latest Post</font></b></td>
  7. </tr>


Le truc c que seule la première ID=... est modifiée ;) pas les autres... comment changer TOUS les tags d'un coup ?

Reply

Marsh Posté le 16-12-2002 à 13:16:54    

Normal, un attribut 'id' doit être unique dans tout le document. Si c'est pour changer la couleur de fond de toutes les lignes d'un tableau, change plutôt la couleur sur l'élément <tr>


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 16-12-2002 à 13:23:50    

voui j'ai découvert ca, sauf que j'ai divers tags TR à changer moi ;)

Reply

Marsh Posté le 16-12-2002 à 13:43:17    

Dans ce cas tu peux le donner un nom (name="plop" ). Tu as le droit d'assigner plusieurs fois le même nom a plusieurs éléments.
 
Tu récupère ensuite une liste d'éléments qui on le même nom avec document.getElementsByName("plop" )


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 16-12-2002 à 13:57:47    

Sinon on m'a filé ca comme script : ca semble déjà fonctionner ;) juste que j'ai besoin de capter comment il fonctionne, ca j'ai pas le temps tout de suite ;)
 

Code :
  1. <html>
  2. <head>
  3. <style>
  5. .style0
  6. {
  7. color:#000000;
  8. }
  10. .style1
  11. {
  12. color:#FF0000;
  13. }
  14. </style>
  16. <script language="JavaScript">
  17. <!-- 
  19. // Modifie une propriété d'une règle (style) d'une feuille de styles  
  20. // Entrée :   
  21. // rule : nom de la règle (style)  
  22. // property : nom de la propriété dans le style à modifier  
  23. // value : nouvelle valeur  
  24. function changeCssRule(rule,property,value)
  25. {
  26. // Si le browser ne possède pas la propriété styleSheets on sort  
  27. if (!document.styleSheets) return;
  29. // Recherche du tableau contenant les règles : je suppose qu'il n'y a qu'une feuille de styles  
  30. var theRules = new Array();
  31. if (document.styleSheets[0].cssRules)
  32. theRules = document.styleSheets[0].cssRules 
  33. else if (document.styleSheets[0].rules)
  34. theRules = document.styleSheets[0].rules 
  35. else return;
  37. // Recherche de la bonne règle par son nom  
  38. theRule=null
  39. for (var i=0; i<theRules.length; i++)
  40. {
  41. if (theRules[i].selectorText=="."+rule)
  42. {
  43.   theRule=theRules[i]
  44.   break;
  45. }
  46. }
  48. // Si le style gère la propriété alors on change sa valeur   
  49. if (property in theRule.style) theRule.style[property] =value;
  50. }
  53. // Change la classe (règle d'un style) associée à un élément  
  54. // Entrée :  
  55. // id : id de l'élément doit être unique sinon seul le 1er élément est utilisé  
  56. // rule : nom de la classe (règle)  
  57. function changeElementClass(id,rule)
  58. {
  59. if (!document.getElementById) return;
  60. ref=document.getElementById(id)
  61. ref.className=rule
  62. }
  65. // -->  
  66. </script>
  67. </head>
  68. <body>
  69. Hello, moi je suis dans le style défini pour body : vous ne pouvez pas me modifier !
  71. <table border=1>
  72. <tr>
  73. <td>Colonne A</td>
  74. <td>Colonne B</td>
  75. </tr>
  77. <tr>
  78. <td class="style1">J'utilise .style1</td>
  79. <td>Moi pas !</td>
  80. </tr>
  83. <tr>
  84. <td class="style0" id="elt1">Moi c'est .style0 et mon id est elt1</td>
  85. <td class="style1">Moi si ;-)</td>
  86. </tr>
  87. </table>
  89. <form>
  90. <input type="button" value="Mettre couleur de .style1 en bleu + police Arial + fond gris" 
  91. onclick="changeCssRule('style1','color','#0000FF');
  92. changeCssRule('style1','fontFamily','Arial');
  93. changeCssRule('style1','backgroundColor','#cccccc')"><br>
  94. <input type="button" value="Remplacer la classe de l'élément elt1 par style1" onclick="changeElementClass('elt1','style1');">
  96. </body>
  97. </html>

Reply

Marsh Posté le 16-12-2002 à 14:02:59    

Ben il me semble qu'il y a tous les commentaires pour comprendre ;)
 
A voir, après si ça marche sur tous les navigateurs ;)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 16-12-2002 à 14:36:46    

Voui je vais tester... pour les navigateurs... si ca marche sous IE ca me suffira ;)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed