คุณสมบัติ lang ใน HTML DOM

คุณสมบัติ lang ใช้สำหรับอ่านหรือตั้งค่ารหัสภาษา (language code) ของเนื้อหาในอีลีเมนต์ เช่น 'en' สำหรับภาษาอังกฤษ, 'th' สำหรับภาษาไทย

ไวยากรณ์ (Syntax)

การอ่านค่ารหัสภาษา

HTMLElementObject.lang

การตั้งค่ารหัสภาษา

HTMLElementObject.lang = 'lang_code'

ตัวอย่างการใช้งาน

ตัวอย่างด้านล่างเปลี่ยนภาษาของช่องกรอกจากอังกฤษเป็นสเปน:

<!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>

ผลลัพธ์

ก่อนคลิกปุ่ม "Translate to Spanish": แสดงข้อความภาษาอังกฤษ, lang="en"

หลังคลิกปุ่ม "Translate to Spanish": ข้อความเปลี่ยนเป็นสเปน, lang="es", แสดง "Currently accepted language: es"

หมายเหตุ: รูปภาพตัวอย่างจากต้นฉบับไม่ได้รวมอยู่ในเนื้อหานี้