การทำงานกับ document.body ใน JavaScript

Property document.body ให้การเข้าถึง Element <body> ของเอกสารโดยตรง คืนค่า HTMLBodyElement Object

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Example</title>
  </head>
  <body>
    <p>Demo Text</p>
    <script>
      document.body.style.backgroundColor = "blue";
    </script>
  </body>
</html>

คำอธิบาย

• document.body — เข้าถึง <body> Element โดยตรง (รองรับทุก Browser)
• .style.backgroundColor — เปลี่ยนสีพื้นหลังของหน้าทั้งหน้า
• ผลลัพธ์: หน้าเว็บมีพื้นหลังสีน้ำเงิน

การใช้งานที่พบบ่อย

• เปลี่ยน Style ทั้งหน้า: document.body.style.cssText = '...'
• เพิ่ม/ลบ Class: document.body.classList.add('dark-mode')
• Event Delegation: document.body.addEventListener('click', handler)
• วัดขนาด Viewport: document.body.clientWidth/Height
• Scroll Control: document.body.scrollTop (Quirks Mode) หรือ document.documentElement.scrollTop (Standards Mode)

ข้อสังเกต: ใน HTML5 <body> Tag เป็น Optional แต่ document.body ยังคงทำงานได้เสมอ