คุณสมบัติ title ของ HTML DOM

คุณสมบัติ title ของ HTML DOM ใช้สำหรับ อ่านหรือกำหนด สตริงที่สอดคล้องกับค่าของแอตทริบิวต์ title ขององค์ประกอบ HTML ค่าของ title จะแสดงเป็น tooltip เมื่อวางเมาส์เหนือองค์ประกอบนั้น

ไวยากรณ์ (Syntax)

การอ่านค่า

ElementOfHTMLObject.title

การกำหนดค่า

ElementOfHTMLObject.title = string

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

ตัวอย่างนี้กำหนด title ให้กับช่องกรอกข้อความเมื่อกดปุ่ม แล้วทดสอบโดยวางเมาส์เหนือช่องกรอก

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM title</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-title</legend>
      <input type="text" id="textSelect" title="" >
      <input type="button" onclick="getTitle()" value="Better define the above field">
      <div id="divDisplay"></div>
    </fieldset>
  </form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var textSelect = document.getElementById("textSelect");
  function getTitle() {
    if(textSelect.title === ''){
      divDisplay.textContent = 'Details defined now! Please hover over field';
      textSelect.title = 'Full Name Expected';
    }
  }
</script>
</body>
</html>

ผลลัพธ์ (Output)

ก่อนกดปุ่ม "Better define the above field":

หลังกดปุ่ม "Better define the above field" (วางเมาส์เหนือช่องกรอกเพื่อดู tooltip):