Chức năng thay đổi nền nút trong HTML

Nếu bạn muốn các nút trên các trang Web của bạn thu hút sự chú ý, bạn phải làm nhiều hơn là chỉ cần thêm chúng vào mã HTML của mình bằng cách sử dụng thẻ "đầu vào". Các nút, theo mặc định, có nền màu xám với văn bản màu đen. Một hàm JavaScript đơn giản có thể thay đổi nền nút nhàm chán thành một màu sặc sỡ hoặc thậm chí tô điểm nó bằng một hình ảnh bạn chọn.

Tạo các nút

Không có định dạng CSS, mã cần thiết để tạo nút trang Web cơ bản sẽ xuất hiện như sau:

Bạn có tùy chọn để thêm một tham chiếu lớp CSS, đặt nền của nút thành màu vàng như hiển thị ở đây:

Lớp CSS sau, được đặt trong phần kiểu tài liệu của bạn sẽ tạo lớp đó:

.styleButton {màu nền: Vàng;}

Thay đổi "Màu vàng" thành bất kỳ màu HTML hợp lệ nào để đạt được giao diện bạn mong muốn. Thay vào đó, bạn có thể thêm hình ảnh vào nền của nút bằng cách sử dụng mã CSS sau:

.styleButton {hình nền: url ('myImage.jpg');}

Thay thế "myImage.jpg" bằng URL của bất kỳ hình ảnh nào trên Web hoặc URL của một hình ảnh trên máy chủ Web của bạn.

Các tham số chức năng

Ví dụ sau đây cho thấy khung của một chức năng thay đổi nền của nút:

chức năng changeBackground (buttonID, backgroundType, buttonBackground) {if (backgroundType == "image") {// Thay đổi hình nền của nút}

khác {// Thay đổi màu nền của nút}}

Hàm này chấp nhận ba tham số. NútID giữ ID của nút bạn muốn thay đổi. Biến nềnType có thể có giá trị "màu" hoặc "hình ảnh." Tham số cuối cùng, buttonBackground, giữ màu bạn muốn thêm vào nút hoặc URL của hình ảnh. Mã xử lý logic được xác định trong khối "if" đầu tiên nếu bạn chuyển "hình ảnh" làm giá trị của BackgroundType. Mặt khác, nó thực thi các câu lệnh trong khối "khác" và thay đổi màu nền của nút.

Mã logic

Đoạn mã sau liệt kê các câu lệnh cần thiết để thêm ảnh nền vào nút hoặc thay đổi màu nền của nó tùy thuộc vào giá trị được truyền trong tham số backgroundType:

chức năng changeBackground (buttonID, backgroundType, buttonBackground) {if (backgroundType == "image") {// Thay đổi hình nền của nút var urlValue = "URL ('" + buttonBackground + "')"; document.getEuityById (buttonID) .style.backgroundImage = urlValue; }

} khác }}

Nếu bạn gọi hàm và truyền cho nó một loại nền "hình ảnh", mã sẽ đặt thuộc tính backgroundImage của nút thành màu được truyền trong biến buttonBackground. Mặt khác, mã đặt thuộc tính backgroundColor của nút thành màu được truyền trong biến buttonBackground.

Lời khuyên

Khi sử dụng chức năng để thêm hình ảnh vào nền, hãy chọn một hình ảnh đủ nhỏ để đặt bên trong nút. HTML không giảm kích thước hình ảnh để phù hợp mà không có yếu tố trang. Bạn cũng có thể làm cho hình nền nút di chuyển, dao động hoặc phát sáng bằng cách thêm QUÀ TẶNG hoạt hình nhỏ cho chúng. Cẩn thận khi đặt hình ảnh phức tạp trên các nút vì chúng có thể gây khó khăn cho việc đọc văn bản của nút nếu các nút của bạn có văn bản.