begin process at 2010 08 01 01:45:46
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Divers

 > DHTML - MANIP CSS

DHTML - MANIP CSS


 Information sur la source

Note :
7,33 / 10 - par 3 personnes
7,33 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Divers Niveau :Débutant Date de création :04/03/2004 Date de mise à jour :12/03/2004 10:25:53 Vu :7 308
Auteur : Deny

Ecrire un message privé
Commentaire sur cette source (1)
Ajouter un commentaire et/ou une note

 Description

Beaucoup de façons de changer une page en manipulations dhtml et css, en inner et outer Text/HTML.
Des choses intéressantes.
Certaines peuvent paraître évidentes : quand on en fait une par this.innerText, on écrase l'html interne à l'élément sur lequel on l'applique.
Des modif dhtml type this.style... ne sont pas restaurables par this.className, même en appliquant une autre classe, les éléments changés restent changés.
innerText et HTML ainsi que outer permettent de changer les texte et HTML, de façon différente.
Difficile à maitriser complètement. Des essais sont à faire pour voir ce qui marche et ce qui ne marche pas.
Des explications sont dans la source.

Source

  • <html>
  • <head>
  • <script>
  • function controle() {
  • if(document.getElementById('voir').innerText=="voir ici")
  • {document.getElementById("clique").innerText="Non, on y va pas! Passe au dessus";
  • document.getElementById("info").innerText="InnerText : Change le texte en gardant l'HTML";
  • }
  • }
  • function controleplus() {
  • if(document.getElementById('clique').innerText=="Cliques maintenant")
  • {document.getElementById("tb").style.backgroundColor="yellow";
  • document.getElementById("info").innerText=document.getElementById("tb").style.backgroundColor;
  • }
  • else {document.getElementById("clique").innerHTML="J'ai dis <i>NON</i>!";
  • document.getElementById("info").innerText="innerHTML : change le texte et l'HTML interne";
  • }
  • }
  • function doClick(col) {
  • var e;
  • e = window.event.srcElement;
  • e.style.backgroundColor = col;
  • }
  • function chghtml() {
  • document.getElementById("voir").innerHTML="<div id='tb' style='border:1px solid black'><table><tr><td colspan=2>innerHTML</td></tr><tr><td>hello</td><td>hello</td></tr><tr><td>hello</td><td><p style='text-decoration:underline;cursor:hand;' onmouseover='restorehtml();'>Restore</p></td></tr></table></div>";
  • document.getElementById("info").innerText="innerHTML : change le texte et l'HTML interne";
  • document.getElementById("div2").style.display="inline";
  • }
  • function restorehtml() {
  • document.getElementById("voir").innerHTML="voir ici";
  • document.getElementById("info").innerText="innerHTML : change le texte et l'HTML interne + style.display";
  • document.getElementById("clique").innerText="Cliques après être passé au dessus";
  • document.getElementById("div2").style.display="none";
  • }
  • function chgcolor() {
  • document.getElementById("tb").style.backgroundColor = document.forms[0].col.value;
  • document.getElementById("info").innerText=document.getElementById("tb").style.backgroundColor;
  • }
  • function outer0() {
  • document.getElementById("p0").outerText="C'est parti !";
  • }
  • function outer1() {
  • document.getElementById("p1").outerHTML="<H1>C'est venu !</H1>";document.getElementById("info").innerText="On ne peut pas mélanger les outerHTML et inner, outerText supprimant tout, les id entrées sont alors supprimées. Donc attention aux manoeuvres...";
  • }
  • </script>
  • <style type="text/css">
  • #div1 {position: absolute; top: 30px; left: 450px; width: 200px; height:100px;background-color:red;border:2px outset yellow;}
  • #div2 {position: absolute; top: 150px; left: 450px; width: 200px; height:75px;background-color:red;border:2px outset yellow;color:white;fon-weight:700;text-align:center;display:none;}
  • #info {position: absolute; top: 300px; left: 350px; width: 300px; height:50px;border:2px outset darkblue;}
  • p.c1 {color:yellow;font-family:verdana;font-size:12px;}
  • p.c2 {color:white;font-family:verdana;font-size:18px;font-weight:700;}
  • p.c3 {font-family:verdana;font-size:16px;}
  • p.c4 {color:blue;font-family:verdana;font-size:26px;font-weight:300;width:80px;border:1px solid blue;}
  • p.c5 {color:blue;font-family:Arial;font-weight:900;text-decoration:underline;font-size:26px;width:80px;border:2px solid black;}
  • a:link {color:yellow;background-color:red;font-weight:bold}
  • a:visited {color:white;background-color:red;font-weight:700}
  • #clique {width:200px;cursor:hand;padding:20 0 0 0;font-weight:700;color:red;}
  • H1 {font-size:16px;font-weight:bold;}
  • </style>
  • </head>
  • <body style="border:15px darkblue solid;overflow:hidden;">
  • <p>Activé par les onmouseover onmouseout et onClick</p>
  • <div id="div1"><p class="c1" onmouseover="this.className='c2';document.getElementById('info').innerText='innerText+className';" onmouseout="this.className='c1';">Hello, comment va ?</p></div>
  • <div id="div2"><form><input type="text" name="col" style="width:75px;"><br><input type="button" value="go" onClick="chgcolor();"></form><br>Changez la couleur du carré (english, ou #RRVVBB)</div>
  • <p class="c3"><a href="#" onmouseover="document.getElementById('info').innerText='window.event.srcElement = adresse page+lien et attribue un style à l\'événement + GBID.style.bgcol(Clique ici)';" onClick="doClick('black');document.getElementById('div1').style.backgroundColor='black';">Clique ici</a>........Barre de scroll: <a href="#" onClick="document.body.style.overflow='scroll'">Afficher</a> - <a href="#" onClick="document.body.style.overflow='hidden'">Masquer</a></p>
  • <p><a href="#" onClick="doClick('green');">Ici aussi</a></p>
  • <p class="c4" onmouseover="this.style.color='red';this.style.fontSize='18px';document.getElementById('info').innerText='innerText+this.style+this.classNameIdem';" onmouseout="this.className='c4';this.style.borderWidth='0';">Hello</p>
  • <p class="c4" onmouseover="this.style.color='green';this.style.fontSize='18px';document.getElementById('info').innerText='innerText+this.style+this.classNameAutre';" onmouseout="this.className='c5';this.innerText='Hello';">Hello</p>
  • <div id="voir" style="width:100px;height:50px;" onmouseover="chghtml();document.getElementById('clique').innerText='Cliques maintenant';document.getElementById('info').innerText='innerHTML+style.display';">voir ici</div>
  • <p id="clique" onmouseover="controle();" onmousedown="controleplus();"><a href="#" onClick="return false;">Cliques après être passé au dessus</a></p>
  • <div id="info">information</div>
  • <p><------ Les outer --------------------------------></p>
  • <div style="width:25%">
  • <H1 id="p0" onmouseover="outer0();">this.outerText</H1>
  • <p id="p1" onmouseover="outer1()">this.outerHTML</p>
  • </div>
  • </body>
  • </html> 
<html>
<head>
<script>
function controle() {
if(document.getElementById('voir').innerText=="voir ici")
	{document.getElementById("clique").innerText="Non, on y va pas! Passe au dessus";
	document.getElementById("info").innerText="InnerText : Change le texte en gardant l'HTML";
	}
}
function controleplus() {
if(document.getElementById('clique').innerText=="Cliques maintenant")
	{document.getElementById("tb").style.backgroundColor="yellow";
	document.getElementById("info").innerText=document.getElementById("tb").style.backgroundColor;
	}
else {document.getElementById("clique").innerHTML="J'ai dis <i>NON</i>!";
	document.getElementById("info").innerText="innerHTML : change le texte et l'HTML interne";
	}
}
function doClick(col) {
var e;
e = window.event.srcElement;
e.style.backgroundColor = col;
}
function chghtml() {
	document.getElementById("voir").innerHTML="<div id='tb' style='border:1px solid black'><table><tr><td colspan=2>innerHTML</td></tr><tr><td>hello</td><td>hello</td></tr><tr><td>hello</td><td><p style='text-decoration:underline;cursor:hand;' onmouseover='restorehtml();'>Restore</p></td></tr></table></div>";
	document.getElementById("info").innerText="innerHTML : change le texte et l'HTML interne";
	document.getElementById("div2").style.display="inline";
}
function restorehtml() {
	document.getElementById("voir").innerHTML="voir ici";
	document.getElementById("info").innerText="innerHTML : change le texte et l'HTML interne + style.display";
	document.getElementById("clique").innerText="Cliques après être passé au dessus";
	document.getElementById("div2").style.display="none";
}
function chgcolor() {
	document.getElementById("tb").style.backgroundColor = document.forms[0].col.value;
	document.getElementById("info").innerText=document.getElementById("tb").style.backgroundColor;
	}
function outer0() {
	document.getElementById("p0").outerText="C'est parti !";
	}
function outer1() {
	document.getElementById("p1").outerHTML="<H1>C'est venu !</H1>";document.getElementById("info").innerText="On ne peut pas mélanger les outerHTML et inner, outerText supprimant tout, les id entrées sont alors supprimées. Donc attention aux manoeuvres...";
	}
</script>
<style type="text/css">
#div1 {position: absolute; top: 30px; left: 450px; width: 200px; height:100px;background-color:red;border:2px outset yellow;}
#div2 {position: absolute; top: 150px; left: 450px; width: 200px; height:75px;background-color:red;border:2px outset yellow;color:white;fon-weight:700;text-align:center;display:none;}
#info {position: absolute; top: 300px; left: 350px; width: 300px; height:50px;border:2px outset darkblue;}
p.c1 {color:yellow;font-family:verdana;font-size:12px;}
p.c2 {color:white;font-family:verdana;font-size:18px;font-weight:700;}
p.c3 {font-family:verdana;font-size:16px;}
p.c4 {color:blue;font-family:verdana;font-size:26px;font-weight:300;width:80px;border:1px solid blue;}
p.c5 {color:blue;font-family:Arial;font-weight:900;text-decoration:underline;font-size:26px;width:80px;border:2px solid black;}
a:link {color:yellow;background-color:red;font-weight:bold}
a:visited {color:white;background-color:red;font-weight:700}
#clique {width:200px;cursor:hand;padding:20 0 0 0;font-weight:700;color:red;}
H1 {font-size:16px;font-weight:bold;}
</style>
</head>
<body style="border:15px darkblue solid;overflow:hidden;">
<p>Activé par les onmouseover onmouseout et onClick</p>
<div id="div1"><p class="c1" onmouseover="this.className='c2';document.getElementById('info').innerText='innerText+className';" onmouseout="this.className='c1';">Hello, comment va ?</p></div>
<div id="div2"><form><input type="text" name="col" style="width:75px;"><br><input type="button" value="go" onClick="chgcolor();"></form><br>Changez la couleur du carré (english, ou #RRVVBB)</div>
<p class="c3"><a href="#" onmouseover="document.getElementById('info').innerText='window.event.srcElement = adresse page+lien et attribue un style à l\'événement + GBID.style.bgcol(Clique ici)';" onClick="doClick('black');document.getElementById('div1').style.backgroundColor='black';">Clique ici</a>........Barre de scroll: <a href="#" onClick="document.body.style.overflow='scroll'">Afficher</a> - <a href="#" onClick="document.body.style.overflow='hidden'">Masquer</a></p>
<p><a href="#" onClick="doClick('green');">Ici aussi</a></p>
<p class="c4" onmouseover="this.style.color='red';this.style.fontSize='18px';document.getElementById('info').innerText='innerText+this.style+this.classNameIdem';" onmouseout="this.className='c4';this.style.borderWidth='0';">Hello</p>
<p class="c4" onmouseover="this.style.color='green';this.style.fontSize='18px';document.getElementById('info').innerText='innerText+this.style+this.classNameAutre';" onmouseout="this.className='c5';this.innerText='Hello';">Hello</p>
<div id="voir" style="width:100px;height:50px;" onmouseover="chghtml();document.getElementById('clique').innerText='Cliques maintenant';document.getElementById('info').innerText='innerHTML+style.display';">voir ici</div>
<p id="clique" onmouseover="controle();" onmousedown="controleplus();"><a href="#" onClick="return false;">Cliques après être passé au dessus</a></p>
<div id="info">information</div>
<p><------ Les outer --------------------------------></p>
<div style="width:25%">
<H1 id="p0" onmouseover="outer0();">this.outerText</H1>
<p id="p1" onmouseover="outer1()">this.outerHTML</p>
</div>
</body>
</html>

 Conclusion

http://msdn.microsoft.com/library/default.asp?

CS S attributs
http://msdn.microsoft.com/workshop/autho r/css/reference/attributes.asp?frame=true
page de frames qui se remet en place dans son frameset.

Il faut bien comprendre que innerHTML change ce qui est dans l'élément, aussi si vous remettez le même changé, vous avez forcément une erreur, ou une répétition.
outerHTML lui change tout.


 Sources du même auteur

OUVERTURE POPUP À URL ALÉATOIRE
Source avec Zip 96 SITES RÉPERTORIÉS : HTML, CSS, DHTML, JAVA, JAVASCRIPT, P...
BROWSER SNIFFER (RENIFLEUR)
Source avec Zip DHTML SCROLLTOP
PATIENTEZ + DATES MANIP
Toutes les sources de Deny

 Sources de la même categorie

Source avec Zip Source avec une capture TROUVER UN ITINÉRAIRE AVEC GOOGLE MAP par amrounix
Source avec Zip DECOMPTEUR ET CHECKBOX TEMOIN par dialvb
Source avec Zip L'API GOOGLE EARTH par brennal
Source avec Zip SIMULER UN SERVEUR COMET (EN PUSH) EN PHP ET JS par sebcap26
OPÉRATIONS SUR MATRICES par Minilogus
Toutes les sources de la catégorie Divers

Commentaires et avis

Commentaire de leris le 04/03/2004 23:41:14

ouais ...

niveau 2 , c'est peut etre un peu "legerement exagéré".
s'il y avait une "restauration à l'etat d'origine" par  un deuxieme clic sur les liens , peut etre . (mais ce serait plus cher !).

bon , c'est quand même mieux que certaines sources ...

je mettrais 5.

L.

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


BORDERLANDS pour Windows
Entre 50€ et 50€

Visiter le guide achat

CalendriCode

Août 2010
LMMJVSD
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,421 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)