CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 09 17:31:07

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

DHTML - MANIP CSS

Information sur la source

Note :

7,33 / 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 :8 170

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

96 SITES RÉPERTORIÉS : HTML, CSS, DHTML, JAVA, JAVASCRIPT, P...

BROWSER SNIFFER (RENIFLEUR)

DHTML SCROLLTOP

PATIENTEZ + DATES MANIP

Toutes les sources de Deny

Sources de la même categorie

COLONNES ADAPTABLES EN HAUTEUR par dronoide

VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol

HTML5 PLAYER par kazma

SCROLLBAR PERSONNALISABLE par kazma

INFO BULLE par RudiRatlos

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

Derniers Blogs

TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice

MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko

[FRAMEWORK 4] LES TASKS ET LE THREAD UI par fathi

WORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBE par JeremyJeanson

TECHDAYS PARIS 2012 : NOUVELLES TENDANCES DU POSTE DE TRAVAIL - BRING YOUR OWN PC par ROMELARD Fabrice

Forum

PB GETTER ET SETTER SUR IE<9 par aerolyte

CREATION DE SCORING OU RATING par Alex16000

API ANYWHERE DE TWITTER par coach872

RE : VéRIFICATION FORMULAIRE par maha1987

SCROLL D'IMAGES DANS UNE PAGE HTML : ORDRE ALéATOIRE DES IMAGES ? par cyber5784

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Fonctionnalites supplementaires sous Joomla
Budget : 800€
Animation interactive pour I phone
Budget : 2 000€
Creation de site web pour une administration scolaire
Budget : 10 000€

Logiciels

Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning
COLLECTOR PLUS (3.00B)
COLLECTOR PLUS (3.00B)

COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par : - L...

Cliquez pour télécharger COLLECTOR PLUS
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
LettresFaciles 2011 (8.0.0.1)
LETTRESFACILES 2011 (8.0.0.1)

LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types. Son inte...

Cliquez pour télécharger LettresFaciles 2011