สมัครเรียนโทร. 085-350-7540 , 084-88-00-255 , ntprintf@gmail.com
# การจัดการ CSS Styles ด้วย JavaScript DOM
ในยุคที่การพัฒนาเว็บไซต์เป็นที่แพร่หลาย การทำความเข้าใจและการใช้ JavaScript เพื่อจัดการ Document Object Model (DOM) ถือเป็นหนึ่งในทักษะที่สำคัญอย่างยิ่งสำหรับนักพัฒนา JavaScript DOM ช่วยให้เราสามารถเข้าถึงและจัดการเอกสาร HTML ได้ เช่น การเปลี่ยนแปลงเนื้อหา การเพิ่มและลบ element รวมถึงการจัดการกับ CSS Styles ของ element นั้นๆ ในบทความนี้เราจะมุ่งเน้นไปที่วิธีการใช้ JavaScript เพื่อจัดการ CSS Styles ผ่าน DOM
Document Object Model หรือ DOM คือโครงสร้างแบบต้นไม้ (Tree Structure) ที่ใช้แสดงและเก็บข้อมูลของเอกสาร HTML หรือ XML โดยแต่ละโหนด (node) ใน DOM จะเป็นตัวแทนของ element หรือเนื้อหาต่างๆ ภายในเอกสาร เช่น tags, attributes, ข้อความ ฯลฯ JavaScript สามารถใช้ DOM เพื่อเข้าถึงและจัดการ element เหล่านี้ได้แบบ dynamic
ก่อนที่เราจะสามารถเปลี่ยนแปลง CSS Styles ได้ เราจำเป็นต้องเข้าถึง element ที่เราต้องการแก้ไขเสียก่อน ซึ่งสามารถทำได้หลายวิธี เช่น ใช้ `getElementById`, `getElementsByClassName`, `getElementsByTagName`, หรือ `querySelector`
// เข้าถึง element โดยใช้ ID
let elementById = document.getElementById('myElement');
// เข้าถึง elements โดยใช้ class name
let elementsByClassName = document.getElementsByClassName('myClass');
// เข้าถึง elements โดยใช้ tag name
let elementsByTagName = document.getElementsByTagName('div');
// ใช้ querySelector เพื่อเข้าถึง element ด้วย CSS selector
let elementByQuery = document.querySelector('.myClass');
เมื่อเราเข้าถึง element ได้แล้ว เราสามารถจัดการ CSS ของ element นั้นได้โดยใช้ property `style` ซึ่งเป็น object ใน JavaScript ที่ช่วยให้เราสามารถเปลี่ยนแปลงสไตล์แต่ละอย่างได้ทีละรายการ
การเปลี่ยนแปลงสไตล์
ในการเปลี่ยนแปลงสไตล์ เราเพียงแค่ระบุ property ที่ต้องการเปลี่ยนแล้วกำหนดค่าใหม่ให้กับมัน เช่น:
// เปลี่ยนสีพื้นหลัง
elementById.style.backgroundColor = 'blue';
// เปลี่ยนสีตัวอักษร
elementById.style.color = 'white';
// เปลี่ยนขนาดตัวอักษร
elementById.style.fontSize = '20px';
การใช้ JavaScript เพื่อเพิ่มคลาส CSS
นอกเหนือจากการเปลี่ยนแปลงสไตล์ด้วยการระบุค่าตรงๆ แล้ว เรายังสามารถเพิ่มหรือลบคลาสที่กำหนดไว้ใน CSS ได้ด้วยการใช้ `classList` ซึ่งมีเมธอดต่างๆ เช่น `add()`, `remove()` และ `toggle()` ช่วยให้เราเลือกการเปลี่ยนแปลงสไตล์โดยอิงจากคลาสที่กำหนดไว้ใน CSS
// เพิ่มคลาสใหม่
elementById.classList.add('newClass');
// ลบคลาส
elementById.classList.remove('oldClass');
// สลับคลาส (ถ้ามีจะลบ ถ้าไม่มีจะเพิ่ม)
elementById.classList.toggle('toggleClass');
เพื่อแสดงการใช้งานเด็มสไตล์ของ DOM อย่างเห็นภาพ เรามาลงมือทำแบบฝึกหัดแบบง่ายๆ ในการเปลี่ยนธีมของเว็บไซต์
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: white;
color: black;
transition: background-color 0.5s, color 0.5s;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
<title>Theme Switcher</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<button id="themeButton">Switch Theme</button>
<script>
const themeButton = document.getElementById('themeButton');
themeButton.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
});
</script>
</body>
</html>
ในตัวอย่างข้างต้น เรามีปุ่มที่ใช้ในการสลับธีมระหว่าง "light" และ "dark" โดยเมื่อใช้ JavaScript เพื่อฟังเหตุการณ์ `click` บนปุ่มนั้น จะสลับการเพิ่มและลบคลาส `dark-mode` ซึ่งมีผลในการเปลี่ยนสไตล์ของเอกสาร HTML
การจัดการ CSS Styles โดยใช้ JavaScript DOM เปิดโอกาสให้นักพัฒนาเว็บไซต์สามารถทำการเปลี่ยนแปลงอินเตอร์เฟซของเว็บไซต์ได้ตามความต้องการและการตอบสนองของผู้ใช้ การเข้าใจการทำงานของ DOM และการใช้ JavaScript เพื่อจัดการ CSS อย่างถูกต้อง จะทำให้เราสามารถสร้างเว็บไซต์ที่มีประสิทธิภาพและทันสมัยได้ หวังว่าบทความนี้จะช่วยให้คุณมีความเข้าใจเพิ่มขึ้นและสามารถนำไปประยุกต์ใช้ในโปรเจ็กต์ของคุณได้ในอนาคต.
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
Tag ที่น่าสนใจ: java c# vb.net python c c++ machine_learning web database oop cloud aws ios android
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM
Copyright (c) 2013 expert-programming-tutor.com. All rights reserved. | 085-350-7540 | 084-88-00-255 | ntprintf@gmail.com