ฟังก์ชั่นเปลี่ยนพื้นหลังของปุ่มใน HTML

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

การสร้างปุ่ม

หากไม่มีการจัดรูปแบบ CSS รหัสที่จำเป็นในการสร้างปุ่มเว็บเพจพื้นฐานจะปรากฏขึ้นดังนี้:

คุณมีตัวเลือกในการเพิ่มการอ้างอิงคลาส CSS ที่ตั้งค่าพื้นหลังของปุ่มเป็นสีเหลืองดังที่แสดงที่นี่:

คลาส CSS ต่อไปนี้วางไว้ในส่วนสไตล์ของเอกสารของคุณสร้างคลาสนั้น:

.styleButton {background-color: Yellow;}

เปลี่ยน "สีเหลือง" เป็นสี HTML ที่ถูกต้องเพื่อให้ได้รูปลักษณ์ที่คุณต้องการ คุณสามารถเพิ่มรูปภาพในพื้นหลังของปุ่มได้โดยใช้รหัส CSS ต่อไปนี้:

.styleButton {background-image: url ('myImage.jpg');}

แทนที่ "myImage.jpg" ด้วย URL ของภาพใด ๆ บนเว็บหรือ URL ของภาพบนเว็บเซิร์ฟเวอร์ของคุณ

พารามิเตอร์ฟังก์ชั่น

ตัวอย่างต่อไปนี้แสดงเฟรมเวิร์กของฟังก์ชันที่เปลี่ยนพื้นหลังของปุ่ม:

ฟังก์ชั่น changeBackground (buttonID, backgroundType, buttonBackground) {ถ้า (backgroundType == "ภาพ") {// เปลี่ยนภาพพื้นหลังของปุ่ม}

อื่น {// เปลี่ยนสีพื้นหลังของปุ่ม}}

ฟังก์ชั่นนี้ยอมรับพารามิเตอร์สามตัว buttonID เก็บ ID ของปุ่มที่คุณต้องการเปลี่ยน ตัวแปร backgroundType สามารถมีค่าเป็น "color" หรือ "image" พารามิเตอร์สุดท้าย buttonBackground เก็บสีที่คุณต้องการเพิ่มลงในปุ่มหรือ URL ของรูปภาพ รหัสประมวลผลตรรกะที่กำหนดไว้ใน "ถ้า" บล็อกแรกถ้าคุณผ่าน "ภาพ" เป็นค่าของ backgroundType มิฉะนั้นจะดำเนินการคำสั่งในบล็อก "else" และเปลี่ยนสีพื้นหลังของปุ่ม

รหัสลอจิก

รหัสต่อไปนี้แสดงรายการคำสั่งที่จำเป็นในการเพิ่มภาพพื้นหลังให้กับปุ่มหรือเปลี่ยนสีพื้นหลังของมันขึ้นอยู่กับค่าที่ส่งผ่านในพารามิเตอร์ backgroundType:

ฟังก์ชั่น changeBackground (buttonID, backgroundType, buttonBackground) {ถ้า (backgroundType == "image") {// เปลี่ยนภาพพื้นหลังของปุ่ม var urlValue = "URL ('" + buttonBackground + "')"; document.getElementById (buttonID) .style.backgroundImage = urlValue; }

อื่น {// เปลี่ยนปุ่มสีพื้นหลัง document.getElementById (buttonID). style.backgroundColor = buttonBackground; }}

หากคุณเรียกใช้ฟังก์ชันและส่งเป็น backgroundType ของ "image" รหัสจะตั้งค่าแอตทริบิวต์ backgroundImage ของปุ่มให้เป็นสีที่ส่งผ่านในตัวแปร buttonBackground มิฉะนั้นรหัสจะตั้งค่าแอตทริบิวต์ backgroundColor ของปุ่มให้เป็นสีที่ผ่านไปในตัวแปร buttonBackground

เคล็ดลับ

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