Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Đối tượng Superscript trong HTML DOM

Đối tượng Superscript trong HTML DOM đại diện cho phần tử <sup> — văn bản chỉ số trên (hiển thị nửa ký tự trên dòng cơ sở). Thường dùng cho số mũ, chú thích, ký hiệu thương hiệu (™, ®).

Tạo đối tượng Superscript

document.createElement("SUP");

Ví dụ minh họa

Tạo động một phần tử <sup> và thêm vào body khi nhấn nút:

<!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>Demo đối tượng Superscript trong DOM</h1>
<button onclick="taoSup()" class="btn">Tạo đối tượng superscript</button>
<script>
  function taoSup() {
    var supElement = document.createElement("SUP");
    supElement.innerHTML = "Đây là văn bản chỉ số trên";
    document.body.appendChild(supElement);
  }
</script>
</body>
</html>

Kết quả

  • Ban đầu: chỉ có nút bấm.
  • Sau khi nhấn nút: dòng chữ "Đây là văn bản chỉ số trên" xuất hiện ở vị trí nửa ký tự trên dòng bình thường, cỡ chữ nhỏ hơn.

Đối tác: Phần tử <sub> (subscript) cho chỉ số dưới — tạo bằng document.createElement("SUB").