โพสต์นี้เขียนถึงการทำงานและการใช้งานคุณสมบัติ HTML DOM Style “backgroundImage”
จะใช้คุณสมบัติ 'backgroundImage' สไตล์ HTML DOM ใน JavaScript ได้อย่างไร
รูปแบบ HTML DOM “ ภาพพื้นหลัง คุณสมบัติ ” ใช้เพื่อปรับแต่งองค์ประกอบ HTML และเอกสารโดยการต่อท้ายภาพพื้นหลังโดยอ้างอิงถึงเส้นทางของมัน
ไวยากรณ์ (การตั้งค่าคุณสมบัติ “backgroundImage”)
วัตถุ. สไตล์ . ภาพพื้นหลัง = 'url('URL')|ไม่มี|เริ่มต้น|สืบทอด'ไวยากรณ์ข้างต้นรองรับค่าคุณสมบัติ 'backgroundImage' ต่อไปนี้:
- url('URL'): เป็นการระบุตำแหน่งของภาพพื้นหลังที่ต้องการ
- ไม่มี: แสดงถึงค่าเริ่มต้น เช่น ไม่มีภาพพื้นหลัง
- อักษรย่อ: ซึ่งคล้ายกับค่าเริ่มต้นของเบราว์เซอร์
- สืบทอด: มันสืบทอดคุณสมบัติจากองค์ประกอบหลัก
ไวยากรณ์ (ส่งคืน URL ของคุณสมบัติ “backgroundImage”)
วัตถุ. สไตล์ . ภาพพื้นหลังไวยากรณ์นี้ส่งคืนค่าสตริงที่มี URL ของภาพพื้นหลังที่เพิ่มเข้ามา
ลองใช้ไวยากรณ์ที่กำหนดไว้ข้างต้นในทางปฏิบัติเพื่ออธิบายการใช้คุณสมบัติสไตล์ 'backgroundImage'
ตัวอย่างที่ 1: ใช้คุณสมบัติสไตล์ “backgroundImage” เพื่อตั้งค่าภาพพื้นหลัง
ตัวอย่างนี้ใช้สไตล์ “ ภาพพื้นหลัง คุณสมบัติ ” เพื่อกำหนดภาพพื้นหลังที่ต้องการให้กับเอกสารโดยระบุ URL
รหัส HTML
ขั้นแรก ดูรหัส HTML ที่ระบุไว้:
< ชั่วโมง2 > ใช้ HTML ทบ สไตล์ คุณสมบัติ backgroundImage ใน JavaScript ชั่วโมง2 >
< ปุ่มบนคลิก = 'myFunc()' > คลิกที่นี่ ปุ่ม >
ในรหัสนี้:
- “ แท็ก ” เพิ่มหัวข้อย่อยของระดับ 2
- “ <ปุ่ม> ” แท็กสร้างปุ่มที่มีการแนบ “ เมื่อคลิก ” เหตุการณ์เพื่อดำเนินการฟังก์ชั่น “ myFunc() ” เมื่อคลิกปุ่ม
รหัสจาวาสคริปต์
ถัดไป ทำตามรหัส JavaScript ที่กำหนด:
< สคริปต์ >ฟังก์ชัน myFunc ( ) {
เอกสาร. ร่างกาย . สไตล์ . ภาพพื้นหลัง = 'url('./html&css/image.jpg')' ;
}
สคริปต์ >
ในข้อมูลโค้ดด้านบน:
- ฟังก์ชันที่ชื่อว่า “ myFunc() ” ถูกกำหนด
- ในนิยามของคำว่า “ style.backgroundImage ” คุณสมบัติใช้ที่ระบุ “ URL ” ภาพเป็นพื้นหลังของเอกสารทั้งหมด
เอาต์พุต
ผลลัพธ์แสดงว่าภาพพื้นหลังถูกเพิ่มไปยังเอกสารทั้งหมดเมื่อคลิกปุ่ม
ตัวอย่างที่ 2: ใช้สไตล์คุณสมบัติ “backgroundImage” เพื่อส่งคืน URL ของภาพพื้นหลัง
“ ภาพพื้นหลัง คุณสมบัติ ” ยังมีประโยชน์ในการส่งคืน URL ของภาพพื้นหลัง มาดูกันในทางปฏิบัติ
รหัส HTML
ขั้นแรก ให้อ่านโค้ด HTML ที่เขียนขึ้น:
< ชั่วโมง2 > ใช้ HTML ทบ สไตล์ คุณสมบัติ backgroundImage ใน JavaScript ชั่วโมง2 >< รหัส div = 'มายดิฟ' สไตล์ = 'ความสูง: 500px; ความกว้าง: 500px;
เส้นขอบ: สีดำทึบ 3px;background-image:url('./html&css/image.jpg')' > นี้ เป็น div แผนก >
< รหัส h4 = 'การสาธิต' > h4 >
ในบล็อกรหัสด้านบน:
- “ ภาพพื้นหลัง คุณสมบัติ ” ใช้ในองค์ประกอบ “” ที่เพิ่มภาพพื้นหลังที่สอดคล้องกับ URL ที่กำหนด
- “ องค์ประกอบ ” สร้างหัวข้อย่อยว่างของระดับ 4 ที่แสดงค่าที่ส่งคืน (URL) ของภาพพื้นหลังที่เพิ่ม
รหัสจาวาสคริปต์
ตอนนี้ ไปที่รหัส JavaScript:
< สคริปต์ >
ให้ img = เอกสาร. getElementById ( 'มายดิฟ' ) . สไตล์ . ภาพพื้นหลัง ;
เอกสาร. getElementById ( 'การสาธิต' ) . HTML ภายใน = img ;
สคริปต์ >ในบล็อกรหัสนี้:
- ประกาศตัวแปร “ img ” ที่ใช้ “ document.getElementById() ” วิธีการเข้าถึงองค์ประกอบ “” ผ่าน id “myDiv” และใช้ภาพพื้นหลังผ่าน “ ภาพพื้นหลัง ' คุณสมบัติ.
- ถัดไป เมธอด “document.getElementById()” จะดึงข้อมูลส่วนหัวย่อยที่ว่างเปล่าโดยใช้รหัส “สาธิต” เพื่อแสดง URL ของภาพพื้นหลังที่ต่อท้าย
เอาต์พุต
ผลลัพธ์จะแสดง URL ของภาพพื้นหลังที่ใช้กับองค์ประกอบ 'div'
บทสรุป
JavaScript ใช้รูปแบบ “ ภาพพื้นหลัง คุณสมบัติ ” สำหรับกำหนดภาพพื้นหลังให้กับองค์ประกอบ HTML ที่ต้องการหรือส่งคืน URL รองรับค่าคุณสมบัติสี่ค่าเพื่อตั้งค่าภาพพื้นหลัง ได้แก่ 'initial', 'inherit', 'URL' และ 'none' อย่างไรก็ตาม ไม่สนับสนุนค่าใด ๆ สำหรับการรับ URL ของภาพพื้นหลัง โพสต์นี้มีคำอธิบายสั้น ๆ ในการใช้คุณสมบัติ 'backgroundImage' สไตล์ HTML DOM ใน JavaScript