วิธีเปลี่ยนภาพพื้นหลังใน JavaScript

ใน JavaScript มีหน้าเว็บที่ต้องการเลย์เอาต์ที่น่าดึงดูด เช่น พื้นหลังสีเข้มซึ่งมักจะทำงานได้ดีกว่าสำหรับอินเทอร์เฟซ ในทำนองเดียวกัน พื้นหลังสีขาวช่วยให้ผู้อ่านมุ่งความสนใจไปที่เนื้อหา ดังนั้นพอร์ทัลข่าวหรือบล็อกจึงใช้พื้นหลังที่ค่อนข้างสว่างและมีข้อความสีเข้ม ในกรณีเช่นนี้ JavaScript จะมีประโยชน์มากในการจัดรูปแบบและปรับปรุงการออกแบบเอกสาร

บทความนี้จะกล่าวถึงวิธีการเปลี่ยนภาพพื้นหลังใน JavaScript

จะเปลี่ยนภาพพื้นหลังใน JavaScript ได้อย่างไร?

ในการเปลี่ยนภาพพื้นหลังใน JavaScript สามารถใช้วิธีการต่อไปนี้:

• “ ภาพพื้นหลัง ” ทรัพย์สินบน “ โดม ”
• “ getElementById() ” วิธีการ และ “ ภาพพื้นหลัง ” ทรัพย์สินบน “ วรรค ”

ทำตามขั้นตอนที่กล่าวถึงทีละตัว!

วิธีที่ 1: เปลี่ยนภาพพื้นหลังใน JavaScript โดยใช้คุณสมบัติ backgroundImage บน DOM

“ ภาพพื้นหลัง ” คุณสมบัติปรับภาพพื้นหลังขององค์ประกอบที่ระบุ เทคนิคนี้สามารถใช้ได้โดยการใช้คุณสมบัติ backgroundImage และระบุภาพพื้นหลังโดยระบุตำแหน่งเส้นทางเป็นอาร์กิวเมนต์

ไวยากรณ์

ในไวยากรณ์ข้างต้น “ URL ” หมายถึงเส้นทางของภาพ

ดูตัวอย่างต่อไปนี้สำหรับการสาธิต

ตัวอย่าง

ในตัวอย่างนี้ ปุ่มจะถูกรวมเข้ากับค่าที่ระบุและ ' เมื่อคลิก ” เหตุการณ์เปลี่ยนเส้นทางไปที่a
ฟังก์ชันชื่อ backgroundImage():

ตอนนี้ฟังก์ชั่น “ ภาพพื้นหลัง() ” จะถูกประกาศและ “ document.body.style.backgroundImage ” จะเข้าถึงภาพพื้นหลังโดยใช้เส้นทางรูปภาพที่ระบุในอาร์กิวเมนต์:

ผลลัพธ์ของการดำเนินการข้างต้นจะส่งผลดังนี้:

วิธีที่ 2: เปลี่ยนภาพพื้นหลังใน JavaScript โดยใช้วิธี getElementById() และคุณสมบัติ backgroundImage ในย่อหน้า

“ getElementById() ” วิธีการส่งกลับองค์ประกอบที่มีค่าที่ระบุและ “ ภาพพื้นหลัง ” ตามที่ระบุไว้ข้างต้น ส่งคืนภาพพื้นหลังขององค์ประกอบเฉพาะที่ระบุในอาร์กิวเมนต์ วิธีนี้สามารถใช้เพื่อจับคู่สีที่ระบุบนพื้นหลังของย่อหน้านั้นๆ

ไวยากรณ์

ที่นี่, ' องค์ประกอบ ” หมายถึงรหัสขององค์ประกอบ

ทำตามตัวอย่างต่อไปนี้เพื่อให้เข้าใจแนวคิดที่ระบุไว้มากขึ้น

ตัวอย่าง

ขั้นแรก รวมย่อหน้าในแท็ก

และกำหนด id เฉพาะ:

ถัดไป สร้างปุ่มที่มีเหตุการณ์ onclick เข้าถึงฟังก์ชัน backgroundImage() ตามที่กล่าวไว้ในวิธีก่อนหน้า:

สุดท้ายประกาศฟังก์ชันชื่อ “ ภาพพื้นหลัง() ” ในทำนองเดียวกัน ที่นี่ เข้าถึงรหัสที่กำหนดโดยใช้ ' getElementById() ” และใช้ภาพพื้นหลังที่ระบุกับมัน ซึ่งจะส่งผลให้มีการใช้สีบนพื้นหลังของย่อหน้า:

เอาท์พุต

เราได้รวบรวมวิธีที่ง่ายที่สุดในการเปลี่ยนภาพพื้นหลังใน Javascript

บทสรุป

หากต้องการเปลี่ยนภาพพื้นหลังใน Javascript ให้ใช้ “ ภาพพื้นหลัง ” ทรัพย์สินบน “ โดม ” สำหรับการใช้ภาพพื้นหลังที่ระบุบนหน้าเว็บทั้งหมดโดยใช้ฟังก์ชันหรือโดยการรับรหัสเฉพาะโดยใช้  “ getElementById() ” วิธีการและการสมัคร “ ภาพพื้นหลัง ” คุณสมบัติตามที่ระบุ “ วรรค ” บล็อกนี้แสดงวิธีการเปลี่ยนภาพพื้นหลังใน JavaScript