Bài đăng này ghi lại hoạt động và cách sử dụng thuộc tính “backgroundImage” của HTML DOM Style.
Làm cách nào để sử dụng Thuộc tính “backgroundImage” kiểu HTML DOM trong JavaScript?
Kiểu HTML DOM “ hình nền ” thuộc tính được sử dụng để tùy chỉnh phần tử HTML và tài liệu bằng cách nối thêm hình nền bằng cách tham chiếu đến đường dẫn của nó.
Cú pháp (Đặt thuộc tính “backgroundImage”)
sự vật. phong cách . hình nền = 'url('URL')|không|ban đầu|kế thừa'Cú pháp trên hỗ trợ các giá trị thuộc tính “backgroundImage” sau:
- url('URL'): Nó chỉ định vị trí của hình nền mong muốn.
- không có: Nó đại diện cho giá trị mặc định, tức là không có hình nền.
- ban đầu: Nó tương tự như giá trị mặc định của trình duyệt.
- thừa kế: Nó kế thừa thuộc tính từ phần tử cha của nó.
Cú pháp (URL trả về của thuộc tính “backgroundImage”)
sự vật. phong cách . hình nềnCú pháp này trả về giá trị chuỗi chứa URL của hình nền được thêm vào.
Thực tế, hãy sử dụng các cú pháp được xác định ở trên để giải thích việc sử dụng thuộc tính kiểu “backgroundImage”.
Ví dụ 1: Áp dụng Thuộc tính Style “backgroundImage” để Đặt Hình nền
Ví dụ này áp dụng phong cách “ hình nền ” để đặt hình nền mong muốn cho tài liệu bằng cách chỉ định URL của nó.
Mã HTML
Trước tiên, hãy xem mã HTML đã nêu:
< h2 > Sử dụng HTML DOM Phong cách Thuộc tính hình nền trong JavaScript h2 >
< nút onclick = 'myFunc()' > Bấm vào đây cái nút >
Trong mã này:
- Các ' ” thẻ thêm tiêu đề phụ của cấp 2.
- Các '
” thẻ tạo một nút có đính kèm “ trong một cái nhấp chuột ” sự kiện để thực thi chức năng “ myFunc() ” khi nhấp vào nút.
Mã JavaScript
Tiếp theo, hãy làm theo mã JavaScript đã cho:
< kịch bản >chức năng myFunc ( ) {
tài liệu. thân hình . phong cách . hình nền = 'url('./html&css/image.jpg')' ;
}
kịch bản >
Trong đoạn mã trên:
- Chức năng có tên “ myFunc() ' được định nghĩa.
- Theo định nghĩa của nó, “ style.backgroundImage ” thuộc tính áp dụng quy định “ URL ” hình ảnh vào nền của toàn bộ tài liệu.
đầu ra
Đầu ra cho thấy hình nền được thêm vào toàn bộ tài liệu khi nhấp vào nút.
Ví dụ 2: Áp dụng thuộc tính Style “backgroundImage” để trả về URL của hình nền
Các ' hình nền ” cũng hữu ích để trả về URL của hình nền. Hãy xem nó thực tế.
Mã HTML
Đầu tiên, xem qua mã HTML đã viết:
< h2 > Sử dụng HTML DOM Phong cách Thuộc tính hình nền trong JavaScript h2 >< id div = 'myDiv' phong cách = 'chiều cao: 500px; chiều rộng: 500px;
đường viền: 3px đen đặc; hình nền: url ('./html&css/image.jpg')' > Cái này là một div div >
< mã h4 = 'thử nghiệm' > h4 >
Trong khối mã trên:
- Các ' hình nền ” được sử dụng trong phần tử “” để thêm hình nền tương ứng với URL đã cho.
- Các ' ” phần tử tạo tiêu đề phụ trống của cấp 4 hiển thị giá trị trả về (URL) của hình nền được thêm vào.
Mã JavaScript
Bây giờ, hãy chuyển sang mã JavaScript:
< kịch bản >
để hình ảnh = tài liệu. getElementById ( 'myDiv' ) . phong cách . hình nền ;
tài liệu. getElementById ( 'thử nghiệm' ) . bên trongHTML = hình ảnh ;
kịch bản >Trong khối mã này:
- Khai báo biến “ hình ảnh ” sử dụng “ tài liệu.getElementById() ” để truy cập phần tử “” thông qua id “myDiv” của nó và áp dụng hình nền thông qua “ hình nền ' tài sản.
- Tiếp theo, phương thức “document.getElementById()” tìm nạp tiêu đề phụ trống bằng cách sử dụng id “demo” của nó để hiển thị URL của hình nền được nối thêm.
đầu ra
Đầu ra hiển thị URL của hình nền được áp dụng cho phần tử “div”.
Phần kết luận
JavaScript sử dụng phong cách “ hình nền ” để gán hình nền cho thành phần HTML mong muốn hoặc trả về URL của nó. Nó hỗ trợ bốn giá trị thuộc tính để đặt hình nền bao gồm “ban đầu”, “kế thừa”, “URL” và “không có”. Tuy nhiên, nó không hỗ trợ bất kỳ giá trị nào để lấy URL của hình nền. Bài đăng này cung cấp một mô tả ngắn gọn để sử dụng thuộc tính “backgroundImage” kiểu HTML DOM trong JavaScript.