HTMLLinkElement: thuộc tính imageSizes
Baseline
2023
Newly available
Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Thuộc tính imageSizes của giao diện HTMLLinkElement cho biết kích thước và điều kiện cho các hình ảnh được preload xác định bởi thuộc tính imageSrcset. Nó phản ánh giá trị của thuộc tính imagesizes của phần tử <link>. Thuộc tính này có thể lấy hoặc đặt giá trị thuộc tính imagesizes.
Thuộc tính imagesizes của phần tử <link> giống như thuộc tính sizes của phần tử <img>: danh sách kích thước nguồn được phân tách bằng dấu phẩy. Mỗi kích thước nguồn bao gồm một điều kiện phương tiện, kích thước của hình ảnh dưới dạng <length>, hoặc từ khóa auto, phải đứng đầu. Để biết thêm thông tin về cú pháp của thuộc tính sizes, xem <img>.
Các thuộc tính imagesrcset và imagesizes chỉ liên quan đến các phần tử <link> có cả thuộc tính rel được đặt thành preload và thuộc tính as được đặt thành image.
Giá trị
Một chuỗi gồm các kích thước nguồn được phân tách bằng dấu phẩy, hoặc chuỗi rỗng "" nếu không được chỉ định.
Ví dụ
Cho phần tử <link> sau:
<link
rel="preload"
as="image"
imagesrcset="narrow.png, medium.png 600w, wide.png 1200w"
imagesizes="(width < 400px) 200px, (400px <= width < 600px) 75vw, 50vw" />
...chúng ta có thể lấy và cập nhật giá trị thuộc tính imagesizes bằng thuộc tính imageSizes:
const link = document.querySelector("link");
log(`Original: ${link.imageSizes}`);
// Thay đổi giá trị
link.imageSizes = "50vw";
log(`Updated: ${link.imageSizes}`);
Đặc tả kỹ thuật
| Specification |
|---|
| HTML # dom-link-imagesizes |