Dhtml - manip css
Contenu du snippet
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.
http://msdn.microsoft.com/library/default.asp?
CSS attributs
http://msdn.microsoft.com/workshop/author/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.
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 / Exemple :
<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?
CSS attributs
http://msdn.microsoft.com/workshop/author/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.
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.