Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

อ็อบเจ็กต์ HTML DOM Subscript

อ็อบเจ็กต์ HTML DOM Subscript แทนองค์ประกอบ <sub> ในเอกสาร HTML ใช้สำหรับแสดงข้อความแบบสับสคริปต์ (subscript) ซึ่งจะปรากฏต่ำกว่าบรรทัดปกติครึ่งตัวอักษร เช่น สูตรเคมี H2O

ไวยากรณ์ (Syntax)

การสร้าง Subscript Object

document.createElement("SUB");

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

ตัวอย่างด้านล่างแสดงการสร้างองค์ประกอบ <sub> แบบไดนามิก:

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    text-align: center;
    background-color: #fff;
    color: #0197F6;
  }
  h1 {
    color: #23CE6B;
  }
  .btn {
    background-color: #fff;
    border: 1.5px dashed #0197F6;
    height: 2rem;
    border-radius: 2px;
    width: 60%;
    margin: 2rem auto;
    display: block;
    color: #0197F6;
    outline: none;
    cursor: pointer;
  }
</style>
</head>
<body>
<h1>DOM subscript Object Demo</h1>
<button onclick="createSub()" class="btn">Create a subscript object</button>
<script>
  function createSub() {
    var subElement = document.createElement("SUB");
    subElement.innerHTML = "This is a subscript element";
    document.body.appendChild(subElement);
  }
</script>
</body>
</html>

ผลลัพธ์ (Output)

ก่อนคลิกปุ่ม: แสดงเฉพาะหัวข้อและปุ่ม หลังคลิกปุ่ม Create a subscript object: จะมีข้อความ "This is a subscript element" ปรากฏในรูปแบบสับสคริปต์ (ต่ำกว่าบรรทัดปกติครึ่งตัวอักษร)

การใช้งานทั่วไป: สูตรเคมี (H2O, CO2), สัญลักษณ์คณิตศาสตร์, ตัวเลขฐาน