Velociraptor (betekent "snelle seizer" in het Latijn) is een ...
Beschrijving
Velociraptor was een middelgrote dromaeosaurid, met volwassenen ...
veren
Fossielen van dromaeosauriden primitiever dan ...
Geschiedenis van ontdekking
Tijdens een expeditie door het American Museum of Natural History ...
Classificatie
Velociraptor is een lid van de groep Eudromaeosauria, een afgeleide subgroep van ...
Paleobiology
Het exemplaar "Fighting Dinosaurs", gevonden in 1971, behoudt een ...
Spoelgedrag
In 2010 publiceerden Hone en collega's een paper over ...
Metabolisme
Velociraptor was tot op zekere hoogte warmbloedig, omdat er een ...
Pathologie
Eén schedel van Velociratoptor mongoliensis draagt twee parallelle ...
Zoals u kunt zien, krijgt elke kop een unieke slot
.
En, hier is de HTML-code van de TOC, binnen een label.
In de twee codefragmenten hierboven ziet u de overeenkomende slot
en naamkenmerken in de kopjes en de
2. Nummer de kopjes
Voordat u de JavaScript-code bekijkt die de TOC uit de Laten we aan het document serienummers voor de kopjes toevoegen met CSS-tellers .
artikel {counter-reset: heading; } artikel h2 :: vóór {counter-increment: heading; inhoud: '0'counter (heading)': '; }
Zorg ervoor dat de counter-reset
de counter-reset
behoort tot het element dat het directe bovenliggende element is van alle titels met het kenmerk slot
(dit is het
3. Plaats de TOC in het document
Nu voegen we het script toe dat de TOC invoegt boven de
templateContent = document.querySelector ('template'). inhoud; article = document.querySelector ('article'). cloneNode (true); article.attachShadow ({mode: 'closed'}). appendChild (templateContent.cloneNode (true)); document.querySelector ( '# toc') appendChild (artikel).;
Het bovenstaande codefragment maakt een kopie van
Vervolgens worden de kloon gekloond Als we de CSS-teller op het Hier is de schermafbeelding van de uitvoer: Als u de TOC-titels aan hun respectieve koppen en subkoppen wilt koppelen door een Velociraptor (betekent "snelle seizer" in het Latijn) is een ... Velociraptor was een middelgrote dromaeosaurid, met volwassenen ... Fossielen van dromaeosauriden primitiever dan ... Zoals je hierboven kunt zien, wordt het En de titels in de inhoudsopgave zijn verankerd : In de extra regel hierboven worden alle Bekijk de schermafbeelding van de gelinkte inhoudsopgave hieronder: Je kunt de code die in dit bericht wordt gebruikt, downloaden, downloaden of aanvullen in onze Github Repo. Zelfgemaakte (privé) cloud gratis bouwen Als u openbare clouds zoals Dropbox en Google Drive wilt dumpen en een door uzelf gehoste cloud voor uw team of bedrijf wilt bouwen, dan is Nextcloud een ideale oplossing. Het biedt bijna alle noodzakelijke functies van een cloudopslagprovider, samen met alle controle- en beveiligingsvoordelen van een privé, door uzelf gehoste oplossing. Hoe Facebook uw gegevens gebruikt en wat u moet weten Knal Facebook en privacy samen in dezelfde zin en je hebt reden voor een krachtige verhitte discussie. Het is geen geheim dat Facebook bepaalde vrijheden verwerft met zijn gebruiksvoorwaarden en de gegevens die zijn gebruikers op de site zetten. Het is geen probleem voor hen om experimenten met hun gebruikers uit te voeren, alleen om te zien hoe de gebruikers zouden reageren op manipulatie van hun newsfeedbody
of html
element in plaats van op het article
zouden resetten, zou de teller ook de lijst met koppen binnen de TOC hebben geteld. Dat is waarom u de tellers bij de directe ouder van de rubrieken zou moeten terugstellen .id
aan de koppen toe te voegen en hun bijbehorende TOC-tekst te verankeren, moet u de herhalende id
waarden uit het gekloonde article
. Beschrijving
veren
id
attribuut toegevoegd aan elke kop en subkop in het artikel .id
kenmerken uit het gekloonde artikel verwijderd voordat de Shadow DOM-structuur eraan wordt gekoppeld. templateContent = document.querySelector ('template'). inhoud; article = document.querySelector ('article'). cloneNode (true); article.querySelectorAll ('* [id]'). forEach ((ele) => {ele.removeAttribute ('id')}) article.attachShadow ({mode: 'closed'}). appendChild (templateContent.cloneNode (true )); document.querySelector ( '# toc') appendChild (artikel).;