Dator
 |  Startsida |  Hårdvara |  Nätverk |  Programmering |  Programvara |  Felsökning |  System |   
Programmering
  • C /C + + -programmering
  • Computer Programspråk
  • Delphi Programmering
  • Java Programming
  • JavaScript programmering
  • PHP /MySQL Programmering
  • perl Programmering
  • python Programming
  • Ruby programmering
  • Visual Basics Programmering
    		•
    * Dator Kunskap >> Programmering >> JavaScript programmering >> Content

    Hur du använder DIV med Javascript
    En div är ett objekt inom Document Object Model ( DOM ) på sidan visas i webbläsarens fönster . Den har en unik identifierare ( id ) sträng . Det är ett kvarter behållare för andra ändamål och kan vara dold eller synlig . Det kan också flyttas till vald position i webbläsaren visningsområdet . I div objekt har en uppsättning av väljare i samband med sitt ID-sträng och egenskaperna hos dessa väljare kan ändras med hjälp av java - script . Saker du behöver
    textredigerare.
    Webbläsare .
    Visa fler instruktioner
    1

    Öppna ett nytt dokument i textredigeraren . Spara filen som " use_id.html . "
    2

    Skriv dokumentets sidhuvud kod

    < DOCTYPE html PUBLIC " - . ! //W3C //DTD XHTML 1.0 Strict //EN "

    " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >

    < html xmlns = " http://www .w3.org/1999/xhtml " >


    Använd DIV Med JavaScript < /title > <br> <p> < meta content = " text /html ; charset = utf - 8 " . http - ekv = " Content - Type " /> Addera 3 <p> Skriv dokument stil kod <br> <p> < stil type = " text /css " > <br> <p> # myDiv <br> <p> { <br> <p> position: absolute ; <br> <p> z - index : 0 ; <br> <p> synlighet : synlig ; <br> <p> top : 10EM ; <br> <p> vänster : 10EM ; <br> <p> width : 10EM ; <br> <p> höjd : 5em ; <br> <p> border : 2px solid # ccc ; <br> <p> - moz - border - radius : 0.5em ; <br> <p> - webkit - border - radius : 0.5em ; <br> <p> text - align : center ; <br> <p> } <br> <p> # msg <br> <p> { <br> <p> färg : vit ; <br> <p> bakgrund : grön <br> <p> } <br> <p> < /style > <br> 4 <p> Skriv dokument JavaScript -kod . <br> <p> <script type="text/javascript"> <br> <p> var x ; <br> <p> var y , <br> <p> funktionen paus ( ms ) katalog <p> { <br> <p> var datum = new Date ( ) ; <br> <p> var CURDATE = null ; <br> <p> gör { CURDATE = new Date ( ) ;} <br> <p> samtidigt ( CURDATE - datum < ms ) , <br> <p> } <br> <p> funktionen moveDiv ( ) katalog <p> { <br> <p> x = Math.floor ( Math.random ( ) * 40 ) ; <br> <p> y = Math.floor ( Math.random ( ) * 30 ) , <br> <p> om ( document.all ) { <br> <p> document.getElementById ( " msg " ) innerText = " Hi göra det igen! " , . . //Alla webbläsare <br> <p> } else { <br> <p> document.getElementById ( " msg " ) TextContent = " Hej göra det igen ! " , . . //Firefox <br> <p> } <br> <p> paus ( 500 ) , <br> <p> document.getElementById ( " myDiv " ) style.top = y + " em " , . . <br> <p> document.getElementById ( " myDiv " ) style.left = x + " em " ; . <br> <p> } <br> <p> < /script > <br> <p> < /head > <br> 5 <p> Skriv dokumentets kropp kod <br> <p> <body> <br> <p> <div id="myDiv" onMouseOver = "moveDiv()"/> <br> <p> <p id="msg"> <br> <p> Touch Me ! <br> </p > <br> <p> < /div > <br> <p> < /body> <br> <p> < /html > <br> 6 <p> Öppna denna fil i webbläsaren . Flytta muspekaren över div området , och det kommer att flytta till en ny plats i webbläsaren visningsområdet och visa ett nytt meddelande . , <br> <br> <div class=dad2><script language='javascript' src='/ad/201310/4.js'></script></div> <div class=dad3><script language='javascript' src='/ad/201310/33.js'></script></div> </div> </td> </tr> </table> <table class=dhang1 bgcolor="#DEE7EE"> <tr> <td></td> </tr> </table> <div class=dhang7></div> <table width="92%" height="51" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="50%"><p>Tidigare: <a class='LinkPrevArticle' href='http://www.dator.xyz/Programmering/javascript-programming/90983.html' >Hur dölja alla öppna DIV i JavaScript </a></li></p></td> </tr> <tr> <td width="50%">nästa: <a class='LinkNextArticle' href='http://www.dator.xyz/Programmering/javascript-programming/90985.html' >Hur Rotera Länkar i JavaScript </a></li></td> </tr> </table></td> </tr> </table> <div class=dhang7></div> <table class=s770x246 > <tr> <td class=s375x246 ><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian"> <tr> <td height="244" valign="top"><table class=c1 > <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm"> relaterade artiklar </td> </tr> </table> <table width="95%" height="209" border="0" align="center" cellpadding="0" cellspacing="4"> <tr> <td height="201"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91076.html" title="Hur får man en Remote webbsida med JavaScript " target="_self">Hur får man en Remote webbsida med JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90777.html" title="Hur man gör ett program för att konvertera Celsius till Kelvin " target="_self">Hur man gör ett program för att konvertera Celsius ti…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91182.html" title="Hur man skapar FÄRGER " target="_self">Hur man skapar FÄRGER </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90840.html" title="Hur felsöka JavaScript i Eclipse " target="_self">Hur felsöka JavaScript i Eclipse </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91157.html" title="Hur man lär sig Java Script för gratis " target="_self">Hur man lär sig Java Script för gratis </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90947.html" title="Hur man gör en knapp hämta en fil i HTML " target="_self">Hur man gör en knapp hämta en fil i HTML </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91254.html" title="Hur Inkludera en JS -fil i JSP " target="_self">Hur Inkludera en JS -fil i JSP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90748.html" title="Hur man gör Ackumulerad Scroll Offset i jQuery " target="_self">Hur man gör Ackumulerad Scroll Offset i jQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90837.html" title="Grundläggande Exempel på JQuery " target="_self">Grundläggande Exempel på JQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91047.html" title="Hur man testar för en tom array med Javascript " target="_self">Hur man testar för en tom array med Javascript </a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> <td width="20" valign="top"></td> <td width="375" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian"> <tr> <td height="244" valign="top"> <table class=c3 > <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm">Utvalda artiklarna </td> </tr> </table> <table class=c4 > <tr> <td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/cc-programming/85597.html" title="Hur Omvänd en Array i C + + " target="_self">Hur Omvänd en Array i C + + </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/python-programming/93740.html" title="Hur Round flyttal i Python " target="_self">Hur Round flyttal i Python </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/java-programming/90745.html" title="Lägga till Java Applets till en webbsida med FrontPage " target="_self">Lägga till Java Applets till en webbsida med FrontPage…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/cc-programming/85315.html" title="Vad Är Struktur Variabler initieras till i C " target="_self">Vad Är Struktur Variabler initieras till i C </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/95004.html" title="Hur du tar bort kalkylblad med VBA " target="_self">Hur du tar bort kalkylblad med VBA </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/87318.html" title="Hur man gör en HTML- sträng i Objective C " target="_self">Hur man gör en HTML- sträng i Objective C </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/96555.html" title="Hur man ställer in ett Visual Basic Form " target="_self">Hur man ställer in ett Visual Basic Form </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/96204.html" title="Hur man skriver makron i Visual Basic " target="_self">Hur man skriver makron i Visual Basic </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/perl-programming/93276.html" title="Hur du kontrollerar om ett giltigt datum i Perl " target="_self">Hur du kontrollerar om ett giltigt datum i Perl </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/94979.html" title="Hur man gör ett upprepande Progress Bar i VB " target="_self">Hur man gör ett upprepande Progress Bar i VB </a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table> <div class=dhang8></div> <div class=dhang1></div> <table class=b1> <tr> <td class=bs height=90 align=middle>Copyright © Dator Kunskap http://www.dator.xyz </td> </tr> </table> <div class=dhang1></div> </div> </body> </html>