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

HTML DOMのcharacterSetプロパティとは？使い方をわかりやすく解説

HTML DOMのcharacterSetプロパティは、<meta>要素のcharset属性に関連付けられた文字セット（文字エンコーディング）を表します。HTMLドキュメントの既定の文字セットはUTF-8です。

characterSetプロパティは、そのHTMLドキュメントで使用されている文字エンコーディングを文字列として返します。Webページの既定の文字セットは、HTML側のcharset属性やDOMの設定によって上書きすることも可能です。

構文

characterSetプロパティの構文は次のとおりです。

document.characterSet

サンプルコード

それでは、HTML DOMのcharacterSetプロパティの具体的な使用例を見てみましょう。ボタンをクリックすると、このHTMLドキュメントの文字エンコーディングが表示されます。

<!DOCTYPE html>
<html>
<body>
<p>下のボタンをクリックすると、このHTMLドキュメントの文字エンコーディングを確認できます</p>
<button onclick="encode()">エンコードを確認</button>
<p id="Sample"></p>
<script>
    function encode() {
        var x = document.characterSet;
        document.getElementById("Sample").innerHTML = "使用されている文字エンコーディングは " + x + " です";
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、次のような画面が表示されます。

HTML DOMのcharacterSetプロパティとは？使い方をわかりやすく解説

「エンコードを確認」ボタンをクリックすると、以下のようにドキュメントの文字エンコーディングが表示されます。

HTML DOMのcharacterSetプロパティとは？使い方をわかりやすく解説

コードの解説

このサンプルでは、まず「エンコードを確認」ボタンを作成しています。ユーザーがこのボタンをクリックすると、encode()関数が呼び出される仕組みです。

<button onclick="encode()">エンコードを確認</button>

encode()関数の中では、documentオブジェクトのcharacterSetプロパティを使ってドキュメントの文字エンコーディングを取得し、その値を変数xに代入しています。続いて、idが「Sample」の段落要素に対してinnerHTMLを使用し、説明テキストと変数xを連結した文字列を設定することで、取得したエンコーディングを画面に表示しています。

function encode() {
    var x = document.characterSet;
    document.getElementById("Sample").innerHTML = "使用されている文字エンコーディングは " + x + " です";
}

まとめ

characterSetプロパティを使えば、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