JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでリンクのtype属性の値を取得する方法

JavaScriptでリンク（アンカー要素）のtype属性の値を取得するには、typeプロパティを使用します。このプロパティは、<a>要素に設定されたtype属性の値を文字列として返します。

サンプルコード

以下のコードを実行すると、type属性の値を取得して画面に表示できます。

<!DOCTYPE html>
<html>
   <body>
      <p><a id = "qriesid" href = "https://qries.com/" type="text/html" >Qries</a></p>
      <script>
         var x = document.getElementById("qriesid").type;
         document.write("type属性の値: "+x);
      </script>
   </body>
</html>

コードの解説

このコードでは、まずdocument.getElementById()メソッドを使ってIDが「qriesid」のアンカー要素を取得し、そのtypeプロパティにアクセスしています。取得した値は変数xに格納され、document.write()によって画面に出力されます。

実行結果は以下のようになります。

type属性の値: text/html

なお、type属性はリンク先のMIMEタイプ（text/html、application/pdfなど）を示すものであり、取得した値を条件分岐などに活用することも可能です。

  1. JavaScriptでテキスト装飾（text-decoration）の線の種類を設定する方法

    テキスト装飾（text-decoration）における線の種類を設定するには、textDecorationLine プロパティを使用します。このプロパティを使うことで、下線（underline）、上線（overline）、取り消し線（line-through）など、さまざまな装飾ラインをJavaScriptから動的に指定できます。以下のサンプルコードでは、ボタンをクリックすると、テキストに赤色の上線（overline）が適用されます。サンプルコード<!DOCTYPE html> <html>    <body>    

  2. JavaScriptでページ内リンクのhref属性を取得する方法｜document.linksの使い方を解説

    JavaScriptでリンクのhref属性を取得する方法JavaScriptでは、document.linksコレクションを使うことで、ドキュメント内のリンク（<a>タグ）に簡単にアクセスできます。特定のリンクのhref属性を取得するには、document.links[インデックス].hrefのように記述します。このコレクションは配列と同じように動作します。つまり、最初のリンクがインデックス「0」、2番目のリンクがインデックス「1」というように、出現順に番号が割り当てられます。それでは、具体的なサンプルコードを使って仕組みを見ていきましょう。例1：3番目のリンクのhref属性を取得