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

HTML DOMのLink hreflangプロパティとは？構文と使い方を実例で解説

<link>要素のhreflangプロパティは、リンク先ドキュメントの言語コードを取得・設定するためのプロパティです。外部スタイルシートなど、<link>タグで参照した文書がどの言語で書かれているかをJavaScriptから確認したり、状況に応じて値を書き換えたりすることができます。

構文

基本的な構文は以下の通りです。

  • hreflang属性値を取得する場合
linkObject.hreflang
  • hreflangに言語コードを設定する場合
linkObject.hreflang = langCode

サンプルコード

Link hreflangプロパティの具体的な使用例を見てみましょう。ボタンをクリックすると、リンク先スタイルシートのhreflang属性値を判定し、その結果が画面に表示されます。

<!DOCTYPE html>
<html>
<head>
<title>Link hreflang</title>
<link id="extStyle" hreflang='en' rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<fieldset>
<legend>Link-hreflang</legend>
<h3>？</h3>
<input type="button" onclick="changeStyle()" value="リンク先のドキュメントはどの言語で書かれていますか？">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var extStyle = document.getElementById("extStyle");
    function changeStyle(){
        if(extStyle.hreflang === 'en'){
            divDisplay.textContent = 'リンク先のドキュメントは英語で書かれています';
            document.getElementsByTagName('h3')[0].textContent = 'English';
        }
    }
</script>
</body>
</html>

上記の例で読み込んでいる「style.css」の内容は以下の通りです。

form {
    width:70%;
    margin: 0 auto;
    text-align: center;
}
* {
    padding: 2px;
    margin:5px;
}
input[type="button"] {
    border-radius: 10px;
}
h3 {
    font-size: 72px;
    color:gold;
}

出力結果

上記のコードを実行すると、以下のように表示されます。

「リンク先のドキュメントはどの言語で書かれていますか？」ボタンをクリックする前 −

HTML DOMのLink hreflangプロパティとは？構文と使い方を実例で解説

ボタンをクリックした後 −

HTML DOMのLink hreflangプロパティとは？構文と使い方を実例で解説

補足：hreflang属性について

  • hreflang属性の値には、BCP 47形式の言語コード（例：「ja」「en」「en-US」など）を指定します。
  • この属性は補助的なメタ情報であり、単独ではブラウザの表示や動作に直接的な影響を与えません。
  • hreflangプロパティを使えば、外部リソースの言語設定をJavaScriptから動的に判定・変更できます。
  1. HTML DOMのdoctypeプロパティとは？構文と使い方をわかりやすく解説

    HTML DOMのdoctypeプロパティは、現在のHTML文書に関連付けられているDTD（Document Type Declaration：文書型宣言）を返します。このプロパティは読み取り専用であり、文書型の名前をDocumentTypeオブジェクトとして取得します。なお、対象の文書にDTDが指定されていない場合は、nullが返されます。 構文 doctypeプロパティの基本構文は以下のとおりです。 document.doctype サンプルコード それでは、doctypeプロパティを使用した具体例を見ていきましょう。 <!DOCTYPE html> <html>

  2. HTML DOM designModeプロパティの使い方を徹底解説

    HTML DOMのdesignModeプロパティを使用すると、ドキュメント全体が編集可能かどうかを指定できます。このプロパティを活用することで、HTMLドキュメントはWYSIWYG（What You See Is What You Get：見たままが得られる）エディターのように動作し、ブラウザ上で直接HTMLドキュメントを編集できるようになります。designModeプロパティのデフォルト値は「off」に設定されており、これを「on」に変更することで、ドキュメントの編集が可能になります。構文designModeプロパティを設定する際の構文は以下の通りです。document.designMode