Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1441 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Changer un attribut d'un tag html depuis un textfield

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Changer un attribut d'un tag html depuis un textfield

n°267732
startide
Posté le 12-12-2002 à 01:07:02  profilanswer
 

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

mood
Publicité
Posté le 12-12-2002 à 01:07:02  profilanswer
 

n°267808
gm_superst​ar
Appelez-moi Super
Posté le 12-12-2002 à 11:03:05  profilanswer
 

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
n°268082
startide
Posté le 12-12-2002 à 14:24:04  profilanswer
 

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 !)

n°268106
gm_superst​ar
Appelez-moi Super
Posté le 12-12-2002 à 14:36:39  profilanswer
 

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
n°268119
startide
Posté le 12-12-2002 à 14:48:56  profilanswer
 

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 ?

n°268121
startide
Posté le 12-12-2002 à 14:53:08  profilanswer
 

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.
 

n°268150
gm_superst​ar
Appelez-moi Super
Posté le 12-12-2002 à 15:13:39  profilanswer
 

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
n°268158
startide
Posté le 12-12-2002 à 15:21:19  profilanswer
 

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 ?

n°268165
gm_superst​ar
Appelez-moi Super
Posté le 12-12-2002 à 15:29:29  profilanswer
 

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
n°268174
startide
Posté le 12-12-2002 à 15:36:12  profilanswer
 

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

mood
Publicité
Posté le 12-12-2002 à 15:36:12  profilanswer
 

n°268177
gm_superst​ar
Appelez-moi Super
Posté le 12-12-2002 à 15:38:59  profilanswer
 

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
n°268186
startide
Posté le 12-12-2002 à 15:47:49  profilanswer
 

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:

n°268787
startide
Posté le 13-12-2002 à 02:34:06  profilanswer
 

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 ?

n°270380
gm_superst​ar
Appelez-moi Super
Posté le 16-12-2002 à 13:16:54  profilanswer
 

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
n°270386
startide
Posté le 16-12-2002 à 13:23:50  profilanswer
 

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

n°270405
gm_superst​ar
Appelez-moi Super
Posté le 16-12-2002 à 13:43:17  profilanswer
 

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
n°270422
startide
Posté le 16-12-2002 à 13:57:47  profilanswer
 

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>

n°270431
gm_superst​ar
Appelez-moi Super
Posté le 16-12-2002 à 14:02:59  profilanswer
 

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
n°270448
startide
Posté le 16-12-2002 à 14:36:46  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Changer un attribut d'un tag html depuis un textfield

 

Sujets relatifs
[PHP - HTML] Formulaires[HTML] Include non remplacé
[php] changer textbox en listbox pour afficher des valeurs a modifier[php html] comment aligner 2 tableaux avec generation auto de lignes
Afficheur HTML[HTML JS ] easy pour les pros
[HTML JS] Texte qui clignote en rougeProblème Html !
[ PERL ] Fonction pour ouvrir un fichier html[HTML/tomcat] Formulaire + bouton back : pb conservation des champs...
Plus de sujets relatifs à : Changer un attribut d'un tag html depuis un textfield

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.078 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR