Trong JavaScript, có những trang web cần bố cục hấp dẫn, chẳng hạn như nền tối thường hoạt động tốt hơn cho giao diện. Tương tự, nền trắng cho phép người đọc tập trung vào nội dung và vì vậy các cổng tin tức hoặc blog sử dụng nền tương đối sáng với văn bản tối. Trong những trường hợp như vậy, JavaScript trở nên rất tiện dụng trong việc định dạng và cải thiện thiết kế tài liệu.
Bài viết này sẽ thảo luận về các phương pháp thay đổi hình nền trong JavaScript.
Làm thế nào để thay đổi hình nền trong JavaScript?
Để thay đổi hình nền trong JavaScript, có thể sử dụng các phương pháp sau:
- “ hình nền Thuộc tính 'trên' DOM ”.
- “ getElementById () 'Phương pháp và' hình nền Thuộc tính 'trên' đoạn văn ”.
Lần lượt đi qua các phương pháp đã thảo luận!
Phương pháp 1: Thay đổi Hình nền trong JavaScript Sử dụng thuộc tính backgroundImage trên DOM.
Các ' hình nền ”Thuộc tính điều chỉnh hình nền của phần tử được chỉ định. Kỹ thuật này có thể được áp dụng bằng cách áp dụng thuộc tính backgroundImage và chỉ định hình nền bằng cách định vị đường dẫn của nó như một đối số.
Cú pháp
Trong cú pháp trên, “ URL ”Đề cập đến đường dẫn của hình ảnh.
Nhìn vào ví dụ sau để minh họa.
Thí dụ
Trong ví dụ này, một nút sẽ được bao gồm với giá trị được chỉ định và ' trong một cái nhấp chuột ”Sự kiện chuyển hướng đến một
hàm có tên backgroundImage ():
Bây giờ, một chức năng “ hình nền() ”Sẽ được khai báo và“ document.body.style.backgroundImage ”Thuộc tính sẽ truy cập hình nền bằng cách sử dụng đường dẫn hình ảnh được chỉ định trong đối số của nó:
Kết quả của việc thực hiện ở trên sẽ dẫn đến kết quả như sau:
Phương pháp 2: Thay đổi Hình nền trong JavaScript Sử dụng phương thức getElementById () và thuộc tính backgroundImage trên đoạn văn
Các ' getElementById () ' hình nền ”, Như đã nêu ở trên, trả về hình nền của phần tử cụ thể được chỉ định trong đối số của nó. Phương pháp này có thể được áp dụng để ánh xạ màu được chỉ định trên nền của đoạn văn cụ thể.
Cú pháp
Nơi đây, ' các yếu tố ”Đề cập đến id của một phần tử.
Xem qua ví dụ sau để hiểu rõ hơn về khái niệm đã nêu.
Thí dụ
Trước tiên, hãy bao gồm một đoạn trong thẻ
và gán cho nó một id cụ thể:
Tiếp theo, tạo một nút có sự kiện onclick truy cập hàm backgroundImage () như đã thảo luận trong phương pháp trước:
Cuối cùng, khai báo hàm có tên “ hình nền() ”Tương tự. Tại đây, truy cập Id đã xác định bằng cách sử dụng “ getElementById () ”Và áp dụng hình nền được chỉ định trên đó. Điều này sẽ dẫn đến việc triển khai màu trên nền của đoạn văn:
Đầu ra
Chúng tôi đã biên soạn phương pháp đơn giản nhất để thay đổi hình nền trong Javascript
Sự kết luận
Để thay đổi hình nền trong Javascript, hãy áp dụng “ hình nền Thuộc tính 'trên' DOM 'Để áp dụng hình nền được chỉ định trên toàn bộ trang web bằng cách sử dụng một hàm hoặc bằng cách lấy id cụ thể bằng cách sử dụng' getElementById () 'Phương pháp và áp dụng' hình nền Thuộc tính 'trên' đoạn văn ”. Blog này minh họa các phương pháp thay đổi hình ảnh nền trong JavaScript.