CSS-Fähigkeiten-Linkanmerkung

CSS hat viele Vorteile, die Tabellenlayouts nicht haben Das Layout oder die Seite Das Design ist strikt von den Informationen getrennt, die auf der Seite angezeigt werden, sodass das Design der Seite einfach geändert werden kann, indem einfach eine CSS--Datei durch eine andere ersetzt wird. Dadurch werden viele Techniken von Benutzern wiederverwendet, was einen gewissen Arbeits- und Zeitaufwand reduziert. In diesem Artikel wird die Methode zum Kommentieren von PDF-, ZIP- und DOC-Links vorgestellt.
Manchmal möchten wir den Typ unseres Hyperlinks mit einem kleinen Symbol deutlich angeben. Handelt es sich um ein zip-Dokument oder eine pdf
-Datei. Auf diese Weise weiß der Besucher, dass der Link, auf den er klicken möchte, zum Herunterladen dient und nicht zum Öffnen einer anderen Seite. Wenn jeder IE7 oder FF verwendet. Wir können den Attributselektor [att$=val] auf jeden Fall verwenden, um Attribute zu finden, die mit einem bestimmten Wert enden (z. B. .zip und .doc).

a[href$=".pdf"] { padding-right: 19px; background: url(pdf.gif) no-repeat 100% .5em; }  
a[href$=".zip"] { padding-right: 17px; background: url(zip.gif) no-repeat 100% .5em; }

function fileLinks() {  
    var fileLink;  
    if (document.getElementsByTagName('a')) {  
        for (var i = 0; (fileLink = document.getElementsByTagName('a')[i]); i++) {  
            if (fileLink.href.indexOf('.pdf') != -1) {  
                fileLink.setAttribute('target', '_blank');  
                fileLink.className = 'pdfLink';  
            }  
            if (fileLink.href.indexOf('.doc') != -1) {  
                fileLink.setAttribute('target', '_blank');  
                fileLink.className = 'docLink';  
            }  
            if (fileLink.href.indexOf('.zip') != -1) {  
                fileLink.setAttribute('target', '_blank');  
                fileLink.className = 'zipLink';  
            }  
        }  
    }  
}  
window.onload = function() {  
    fileLinks();  
}

keine Attributselektoren. Glücklicherweise können Sie mit JavaScript und DOM einen ähnlichen Effekt erzielen, indem Sie jedem Element Klassen hinzufügen.

Folgendes ist eine Lösung :

.pdfLink { padding-right: 19px; background: url(pdf.gif) no-repeat 100% .5em; }  
.docLink { padding-right: 19px; background: url(doc.gif) no-repeat 100% .5em; }  
.zipLink { padding-right: 17px; background: url(zip.gif) no-repeat 100% .5em; }