|
|
Hur man reda på hur många bilder i en DIV med Javascript |
|
JavaScript ger dig möjlighet att granska och även ändra HTML-koden på en webbsida efter att sidan har laddats på datorn och visas på skärmen . Du kan räkna antalet bilder inuti en tagg genom att koda taggen med ett " id " och sedan granska texten i taggen och räkna antalet ![]() taggar som finns i yttre taggen . Instruktioner 1 Skapa ett HMTL fil i en textredigerare eller i Anteckningar . Skapa en tag med en " id " -attribut och placera taggarna ![]() inuti taggen . ! Skriv till exempel < DOCTYPE html PUBLIC " - //W3C //DTD XHTML 1.0 Transitional //EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd " > Count Images < /title > <br> <p> < /head > <br> <p> <body> <br> <p> <div id="images"> < img src = " http://example.com/image1.jpg " alt = " image1 " /> <img src="http://example.com/image2.jpg" alt="image2" /> < img src = " http://example.com/image3.jpg " alt = " image3 " /> < /div > <br> <p> < /body> <br> <p> < /html > <br> 2 <p> Skapa en JavaScript -funktion och placera den mellan taggarna <head><meta name=viewport content="width=device-width, initial-scale=1.0"> . Få innehållet i <div> taggen och lagra den i en variabel . Till exempel , typ <br> <p> <script type="text/javascript"> <br> <p> funktion countImages () { <br> <p> var divContents = document.getElementById ( " bilder " ) . innerHTML ; <br> 3 <p> Använd ett reguljärt uttryck för att få arrayelementen som matchar öppnandet av <img> taggen . Till exempel , typ <br> <p> var- matcher = divContents.match ( /<img /) , <br> 4 <p> Få antalet bilder genom att referera antalet element i arrayen . Till exempel , typ <br> <p> var- numMatches = matches.length ; <br> <p> alert ( " Antal matcher är " + numMatches ) , <br> <p> } <br> <p> < /script > <br> 5 <p> anropa JavaScript-funktionen precis före den avslutande <body> att ge HTML- sidan tid att ladda . Till exempel , typ : <br> <p> <script type="text/javascript"> <br> <p> countImages (); <br> <p> < /script > <br> Addera
<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/91005.html' >Hur Extrahera parametrar från en webbadress med JavaScript </a></li></p></td>
</tr>
<tr>
<td width="50%">nästa: <a class='LinkNextArticle' href='http://www.dator.xyz/Programmering/javascript-programming/91007.html' >Hur konvertera en int till en sträng med 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/90939.html" title="Hur man installerar Facebook JavaScript SDK " target="_self">Hur man installerar Facebook JavaScript SDK </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90790.html" title="Vad är en AXD Arkiv " target="_self">Vad är en AXD Arkiv </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90925.html" title="Hur Override varje element i DIV " target="_self">Hur Override varje element i DIV </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91275.html" title="Hur man hittar ett primtal Använda Javascript " target="_self">Hur man hittar ett primtal Använda Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91286.html" title="Hur man gör en Dashboard-widget med Dashcode " target="_self">Hur man gör en Dashboard-widget med Dashcode </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90900.html" title="Hur man rensar elementattribut " target="_self">Hur man rensar elementattribut </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91153.html" title="Hur du använder Javascript Med Flash " target="_self">Hur du använder Javascript Med Flash </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90828.html" title="En handledning för HTML 5 Canvas Animation " target="_self">En handledning för HTML 5 Canvas Animation </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91229.html" title="Konvertera text till Java Script " target="_self">Konvertera text till Java Script </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90854.html" title="Hur man använder en ankarkod i JSP " target="_self">Hur man använder en ankarkod i JSP </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/visual-basics-programming/95211.html" title="Hur man skriver manus med Notepad " target="_self">Hur man skriver manus med Notepad </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/cc-programming/85860.html" title="Så här söker en länkad lista av element i C + + " target="_self">Så här söker en länkad lista av element i C + + </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/php-mysql-programming/92981.html" title="Hur gör jag säkerhetskopiera min MySQL databas i WAMPServer2 " target="_self">Hur gör jag säkerhetskopiera min MySQL databas i WAMP…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/86633.html" title="Filtyper som kan användas med QBASIC " target="_self">Filtyper som kan användas med QBASIC </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/cc-programming/85260.html" title="Hur Redigera Silverlight Datagrid " target="_self">Hur Redigera Silverlight Datagrid </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/88411.html" title="Hur till Öppen JPG-filer Använda Microsoft Net Framework 2.0 " target="_self">Hur till Öppen JPG-filer Använda Microsoft Net Framew…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/cc-programming/86028.html" title="Vilka program Använd Visual C " target="_self">Vilka program Använd Visual C </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90920.html" title="Hur Drop Decimaler Använda JavaScript " target="_self">Hur Drop Decimaler Använda JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/87350.html" title="Hur Kopiera en figur från MATLAB " target="_self">Hur Kopiera en figur från MATLAB </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/java-programming/89790.html" title="Java-projekt med kodning " target="_self">Java-projekt med kodning </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> | | |