そこにあなたは喜んでウェブサイトをサーフィンしています。リンクをクリックして、突然ファイルをダウンロードするように求められている別のサイトにいることに気付きます。そこで何が起こったのですか？迷惑ですね。リンクがどこに向かっているのか、どのタイプのファイルに訪問者に示すためのより良い方法が必要です。したがって、このちょっとした迷惑を解決するために、私はリンクの後にかなり小さなアイコンを追加するJavaScriptとCSSを、ファイルの拡張機能と場所に応じて、ユーザーにロードしようとしているドキュメントのタイプを示すように書きました。
キーテイクアウト
優雅な劣化 - CSSまたは/およびJavaScriptが無効になっている場合
始める前に、この記事で使用するFamfamfamのMark Jamesによる優れた、無料のシルクのアイコンを認めたいと思います。
また、クレジットが期限を迎えるクレジット：この記事は、Alexander KaiserのCSSを使用したTextLinkを象徴する作品に触発されました。さらに、SetePointの非常に独自のJames Edwardsによって書かれたいくつかの優れた機能を使用し、Kevin YankとCameron Adamsによって書かれ、SitePoint Book、Simply Javascriptに不死化されたコアJavaScriptライブラリからさらにいくつか撮影しました。
まあ、一言で言えば、ページ内のすべてのリンクを取り、リンクするファイル拡張子を作成し、リンクの後に適切なアイコンを追加します。ニース。
リンクを含むHTMLページ、index.html
ページのヘッダー内のJavaScriptおよびCSSファイルへのリンクを追加します（サイトのセットアップに合わせてファイル参照を変更します）。
構成
物事をシンプルに保つ精神で、セットアップのほとんどはすでにあなたのために行われています。アイコンを変更したり、拡張機能をファイルしたりする必要がある場合にのみ、構成を変更する必要があります。これらの変更を行うには、JavaScript（ikonize.js）とCSSファイル（ikonize.css）の2つの場所があります。
ikonize.js
どのリンクがアイコンを受信しますか？
リンクがどのタイプのファイルを使用するかを定義するには、ファイル拡張子を確認します。ファイルタイプは、2つのグループに分割されます。Torrentファイルなどの一意のアイコンと同じアイコンを共有するものですが、Flashファイル（.flaおよび.swf）などのファイル拡張機能が異なります。 同じアイコンを共有するファイル拡張機能のグループ化により、数百のCSSクラスとアイコンがあることが保存されます。これを達成するために、2つの配列を作成しました
最初の配列である個々のクラッサレイは、個々のアイコンを含むすべてのリンクのファイル拡張機能を保持します。 CSSクラス名のベースは、ファイル拡張子と同じです。つまり、テキストファイルは「TXT」で参照され、CSSクラス名はclassPrefix（以前に設定）で、「TXT」はベースCSSクラス名です。2番目の配列であるClassArrayは、実際には多次元配列ですが、それを延期させないでください。基本的に、使用したいアイコンの種類に従ってグループ化された個々の配列のグループです。このアレイの最初のアイテムは、個別のクラッサレイです（この配列は常に最初の配列でなければなりません）。次の配列は、1つの重要な違いを持つ以前の配列に似ています。各配列の最初のアイテムは、使用されるCSSクラスの名前であり、次のアイテムはそのクラスが必要なファイル拡張子です。次の例では、.swfおよび.flaファイル拡張機能は、「フラッシュ」CSSクラスに関連付けられます。
注：ファイル拡張子はドットを除外します。つまり、xlsではありません。
a[href$='.doc'] { <br>
display: inline-block; <br>
padding-left: 16px; <br>
background: transparent url(images/icon_doc.gif) center right no-repeat; <br>
}プレフィックスを除外します。 したがって、フラッシュCSSクラスは、「ikon_flash」ではなく常に「フラッシュ」と呼ばれます。
外部リンクclassPrefix is the prefix you want to give the individual CSS classes. Use this to prevent any conflicts with any existing CSS classes. The default is iKon_.
リンクが外部サイトであるかどうかを把握するには、現在のページのホスト名を知る必要があります。
このためには、を使用します これにより、現在のドキュメントの位置が取得され、QualifyHREF関数を使用してドメイン名を取得して、完全に適格なアドレスとホスト名を取得するためにParseurl関数があることを確認します。 （これらの機能は両方とも、居住者のJavaScriptのGuru、Brothercakeによって書かれ、彼のブログ投稿で説明されています）。 後で、外部リンクのクラスを追加すると、このホスト名を使用して、リンクがサイトの外部であるかどうかを確認します。
実際に作業を行うコードdocument.getElementsByTagname（ "A"）を使用してページからすべてのリンクを取得し、リンクのファイル拡張子を決定する必要があります。
関数parseurlとvatififiehrefを再度使用してこれを行います。
最初に、A要素のHREF値を取得します：
linkhref = aelements [iv] .href;classExternal is the name of the CSS class you want to use to show a link to an external site.
次に、値を解析してリンクに関する詳細情報を取得します。 ourl = parseurl（qualifiehref（linkhref））;
次に、リンクの拡張子を取得します：
fileext = ourl.extension;
次に、これらのリンクをループして、アイコンが必要かどうかを解決する必要があります。これは、少しトリッキーになり始めた場所です。 ClassArrayとそれに含まれる各配列をループする必要があります。ループ内でループを実行することにより、これを行います。はい、それはループ、ループ、ループです！ この毛むくじゃらのコードは次のようになります：
a[href$='.doc'] { <br>
display: inline-block; <br>
padding-left: 16px; <br>
background: transparent url(images/icon_doc.gif) center right no-repeat; <br>
}このリンクにはアイコンが必要ですか？
アイコンを追加する必要があるかどうかを確認するには、リンクのファイル拡張子と配列にリストされている各拡張機能と比較します。
classPrefix is the prefix you want to give the individual CSS classes. Use this to prevent any conflicts with any existing CSS classes. The default is iKon_.
classExternal is the name of the CSS class you want to use to show a link to an external site.
リンクが外部サイトにある場合にワークアウトすることは、以前に決定したURLホスト名を構成領域に設定したURLと比較するだけの場合です。
それが本当なら、アンカーに新しい画像要素を追加し、ソースとIDを追加してから、画像のALTとタイトル属性を追加します。クラスを割り当てるだけでなく、追加のアイコンを追加して、このリンクが別のサイトに表示されることを明確に示すだけでなく、アイコンにタイトルとALT属性を追加します。
externalIconLoc is the location of the image to use for the external icon.
今すぐCSSファイルに戻りましょう。
IndividualClassArray = Array('txt', 'xls', 'css', 'torrent');CSSクラスが.docファイルにアイコンを追加するためのCSSクラスです。クラス名には「ikon_」が付いていて、ファイル拡張子「doc」が付いています。このクラスは、基本的に、リンクの上部と下部、右側に少しのパディングを置きます。次に、アイコンの背景画像をそのスペースに追加します。
外部リンクアイコンでは、わずかに異なるクラス構造を使用します。アイコンがボーダレスであることを確認するために、上部と下部を追加します。
ClassPrefix変数を変更した場合は、一致するようにこれらのクラス名を変更することを忘れないでください。
制限classArray = Array( <br>
IndividualClassArray, <br>
Array('flash', 'swf', 'fla') <br>
);リンクには、リンクにアイコンが割り当てられているためのファイル拡張子が必要です（外部サイトでない限り）。スクリプトは、クエリ文字列ベースのナビゲーションリンクも認識していません。 CSSが無効になっている場合、外部リンクアイコンのみが表示され、JavaScriptが無効になっている場合、ページに目に見える変更はありません。
結論url = parseURL(qualifyHREF(document.location.href)).hostname;
Ikonizeは、リンク後に視覚的に意味のあるアイコンを追加するための迅速かつ簡単な方法です。スクリプトはIE5.5で機能し、CSS3属性セレクターとは無関係に機能します。ご想像のとおり、スクリプトはよく分解され、簡単に構成されます。お役に立てば幸いです！
JavaScriptを使用してハイパーリンクを作成するには、ドキュメントオブジェクトモデル（DOM）を操作することが含まれます。新しいアンカー要素を作成し、HREF属性を設定してから、ドキュメントの本文に追加できます。簡単な例は次のとおりです。
var link = document.createelement（ 'a'）;
link.href = "https://www.example.com";
link.textcontent = "go to seamp.com";
document.body.body.appendchild（link）;リンクしたいページのURL。次に、リンクのテキストを設定し、最後にドキュメントの本文にリンクを追加します。この属性は、リンクされたドキュメントを開く場所を指定します。 「_blank」に設定して、新しいウィンドウまたはタブでドキュメントを開くように設定することができます。「_ self」をクリックしたのと同じフレームでドキュメントを開く（これはデフォルトです）、「_ parent」で親フレームのドキュメントを開くか、「_top」を開き、ウィンドウの全身でドキュメントを開きます。例は次のとおりです。
link> textcontent = "go in
JavaScriptを使用してハイパーリンクにタイトルを追加するにはどうすればよいですか？この属性は、リンクされたドキュメントの名前など、リンクに関する追加情報を提供し、マウスがリンクを移動するときにツールチップとして表示されることがよくあります。例は次のとおりです。
var link = document.createelement（ 'a'）;
link.href = "https://www.example.com";
link.title = "go emple.com";
link> textcontent = "emplight in
このコードでは、最初にIDでリンク要素を取得し、親ノードから削除します。
ハイパーリンクのテキストは、「テキストコンテンント」プロパティを使用して変更できます。このプロパティは、指定されたノードのテキストコンテンツとそのすべての子孫を設定または返します。例は次のとおりです。
var link = document.getElementbyId（ 'mylink'）;
link.textcontent = "new link text";
このコードでは、最初にリンク要素をIDで取得し、次に「新しいリンクテキスト」に変更します。 「スタイル」プロパティを使用してスタイルを整えました。このプロパティは、要素からインラインスタイルを追加、変更、または削除するために使用されます。例は次のとおりです。
link.style.fontsize = "20px";
このコードでは、最初にリンク要素をIDでadit ad as and as as and as and on on on on on on on on thing as and on the font and on on shid and a shid and on simes and on est and as fort and as fort and as a shid and on javaScriptを使用してハイパーリンクをリスナーにしますか？
「addeventlistener」メソッドを使用してイベントリスナーをハイパーリンクに追加できます。このメソッドは、指定された要素にイベントハンドラーを添付します。例は次のとおりです。
var link = document.getElementById（ 'mylink'）;
link.download=" myfile.pdf ";
link.textent =" my my my my my my my my file ";このコードでは、最初に新しいアンカー要素を作成し、ダウンロードするファイルのURLにHREF属性を設定します。次に、ダウンロード属性をファイルの名前に設定し、最後にドキュメントの本文にリンクを追加します。
メールクライアントを開くハイパーリンクは、HREF属性の「MailTo：」プロトコルを使用して作成できます。このプロトコルは、ユーザーの電子メールクライアントを新しいメッセージで開き、すぐに送信する準備ができています。例は次のとおりです。
var link = document.createelement（ 'a'）;
link.href = "mailto：example@example.com";
link.textcontent = "email me";
document.body.appendChild（link）;
「mailto：example@example.com」。次に、リンクのテキストを設定し、最後にドキュメントの本文にリンクを追加します。
以上がJavaScriptを使用した役立つハイパーリンクの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
