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

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

อ็อบเจ็กต์ HTML DOM S แทนองค์ประกอบ <s> ในเอกสาร HTML ใช้สำหรับแสดงข้อความที่มีเส้นทับกลาง (strikethrough) แสดงว่าข้อความนั้นไม่ถูกต้องหรือล้าสมัยแล้ว

ไวยากรณ์ (Syntax)

การสร้าง S Object

document.createElement("S");

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

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

<!DOCTYPE html>
<html>
<head>
<style>
  body{
    text-align:center;
    background-color:#fff;
    color:#0197F6;
  }
  h1{
    color:#23CE6B;
  }
  .drop-down{
    width:35%;
    border:2px solid #fff;
    font-weight:bold;
    padding:8px;
  }
  .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;
  }
  p{
    font-size:1.2rem;
    background-color:#db133a;
    color:#fff;
    padding:8px;
  }
</style>
</head>
<body>
<h1>DOM S Object Demo</h1>
<button onclick="createS()" class="btn">Create a s object</button>
<script>
  function createS() {
    var sElement = document.createElement("S");
    sElement.innerHTML="Hi! I'm <s> element in HTML";
    document.body.appendChild(sElement);
  }
</script>
</body>
</html>

ผลลัพธ์ (Output)

ก่อนคลิกปุ่ม: แสดงเฉพาะหัวข้อและปุ่ม หลังคลิกปุ่ม Create a s object: จะมีข้อความ "Hi! I'm element in HTML" ปรากฏพร้อมเส้นทับกลาง (strikethrough)

ความแตกต่าง: <s> ใช้สำหรับข้อความที่ไม่ถูกต้อง/ล้าสมัย ในขณะที่ <del> ใช้สำหรับข้อความที่ถูกลบออกจากเอกสาร