Gør eksterne links orange
vigtighed: 3
Gør alle eksterne links orange ved at ændre deres style-egenskab.
Et link er eksternt hvis:
- Dets
hrefhar://i sig, og - Det ikke starter med
http://internal.com.
Eksempel:
<a name="list">the list</a>
<ul>
<li><a href="http://google.com">http://google.com</a></li>
<li><a href="/tutorial">/tutorial.html</a></li>
<li><a href="local/path">local/path</a></li>
<li><a href="ftp://ftp.com/my.zip">ftp://ftp.com/my.zip</a></li>
<li><a href="http://nodejs.org">http://nodejs.org</a></li>
<li><a href="http://internal.com/test">http://internal.com/test</a></li>
</ul>
<script>
// set style for et enkelt link
let link = document.querySelector('a');
link.style.color = 'orange';
</script>Resultatet skal være som her:
Først skal vi finde alle eksterne referencer.
Der er to måder.
Den første er at finde alle links ved hjælp af document.querySelectorAll('a') og derefter filtrere ud, hvad vi har brug for:
let links = document.querySelectorAll('a');
for (let link of links) {
let href = link.getAttribute('href');
if (!href) continue; // ingen attribut
if (!href.includes('://')) continue; // ingen protokol
if (href.startsWith('http://internal.com')) continue; // intern
link.style.color = 'orange';
}Bemærk: vi bruger link.getAttribute('href'). ikke link.href fordi vi har brug for værdien fra HTML.
… en anden, simplere måde vil være at tilføje vores tjek til CSS-vælgeren:
// kig efter alle links der har :// i href
// men hvor href ikke starter med http://internal.com
let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
let links = document.querySelectorAll(selector);
links.forEach(link => link.style.color = 'orange');