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

HTML DOM langプロパティとは？言語コードの取得・設定方法をわかりやすく解説

HTML DOMのlangプロパティは、要素のコンテンツがどの言語で書かれているかを示す言語コード（例：英語なら「en」）を表す文字列を、取得または設定するためのプロパティです。このプロパティを利用することで、JavaScriptから動的に要素の言語情報を読み取ったり、変更したりすることができます。

構文

langプロパティの基本的な構文は以下のとおりです。

言語コードを取得する場合

HTMLElementObject.lang

lang属性に言語コードを設定する場合

HTMLElementObject.lang = 'lang_code'

補足：主な言語コードの例

lang属性には、ISO 639-1で定義されている言語コードを指定するのが一般的です。代表的な言語コードは以下のとおりです。

  • ja … 日本語
  • en … 英語
  • es … スペイン語
  • fr … フランス語
  • zh … 中国語

サンプルコード

それでは、HTML DOMのlangプロパティを使った具体的な例を見てみましょう。次のコードでは、テキスト入力欄に設定された言語コードを画面に表示し、ボタンをクリックするとその言語をスペイン語（es）に切り替えます。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM lang</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-lang</legend>
<label for="langSelect">Editor:
<input type="text" size="25" lang="en" id="langSelect" value="This is a learning tutorial">
</label>
<input type="button" onclick="updateValue()" value="Translate to Spanish">
<div id="divDisplay">Currently accepted language :</div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputlang = document.getElementById("langSelect");
    divDisplay.textContent += langSelect.lang;
    function updateValue() {
        inputlang.lang = 'es';
        inputlang.value = 'Este es un tutorial de aprendizaje';
        divDisplay.textContent = 'Currently accepted language : '+langSelect.lang;
    }
</script>
</body>
</html>

このコードのポイントは以下の通りです。

  • ページ読み込み時に、入力欄のlangプロパティ（初期値は「en」）を参照して現在の言語を表示します。
  • ボタンをクリックするとupdateValue()関数が実行され、langプロパティに「es」を設定するとともに、入力欄の値もスペイン語のテキストに更新されます。

実行結果

このコードをブラウザで実行すると、以下のように表示されます。

「Translate to Spanish」ボタンをクリックする前：

HTML DOM langプロパティとは？言語コードの取得・設定方法をわかりやすく解説

「Translate to Spanish」ボタンをクリックした後：

HTML DOM langプロパティとは？言語コードの取得・設定方法をわかりやすく解説

このように、HTML DOMのlangプロパティを使えば、要素の言語情報をJavaScriptから柔軟に制御できます。多言語対応のWebサイトを開発する際にも役立つので、ぜひ覚えておきましょう。

  1. 【初心者向け】HTML DOMのoffsetParentプロパティの使い方とサンプルコード

    offsetParentプロパティとは HTML DOM の offsetParent プロパティは、対象要素のオフセット（相対的な位置）がどの親要素を基準として定義されているかを示し、その基準となる親要素への参照を返します。 具体的には、CSS の position プロパティ（relative / absolute / fixed / sticky）が指定された最も近い祖先要素が基準となります。該当する要素が存在しない場合は <body> 要素が返されます。また、テーブルセル内の要素であれば <td> や <table> などのテーブル関連要素が基準にな

  2. HTML DOM titleプロパティとは？使い方とサンプルコードを解説

    HTML DOM titleプロパティとはHTML DOMのtitleプロパティは、HTML要素のtitle属性に対応する文字列を取得（戻り値として返す）したり、設定したりするためのプロパティです。title属性に値が設定されている場合、その要素にマウスカーソルを重ねると、ツールチップとしてテキストが表示されます。この動的な挙動をJavaScriptから制御できるのが、titleプロパティの役割です。構文title属性の値を取得する場合：ElementOfHTMLObject.titletitle属性に文字列を設定する場合：ElementOfHTMLObject.title = string使