HTMLLinkElement: sizes プロパティ

Baseline

広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年1月以降、すべてのブラウザーで利用可能です。

完全な互換性情報を見る
もっと詳しく

sizes は HTMLLinkElement インターフェイスの読み取り専用プロパティで、リソースに含まれる視覚メディア用アイコンのサイズを定義します。このプロパティは、<link> 要素の sizes 属性を反映します。この属性には空白で区切られたサイズのリストを指定し、各サイズは <幅 (ピクセル単位)>x<高さ (ピクセル単位)> またはキーワード any の形式です。

このプロパティが関係するのは、rel が icon または apple-touch-icon のような標準外の種類である場合に限られます。

値

DOMTokenList オブジェクトです。

sizes プロパティ自体は、DOMTokenList オブジェクトを置き換えられないという意味で読み取り専用ですが、sizes プロパティに直接代入することはできます。これは、その value プロパティに代入するのと同じです。また、add()、remove()、replace()、toggle() メソッドを使って、DOMTokenList オブジェクトを変更することもできます。

例

html

<link rel="icon" sizes="72x72 114x114" href="smallish.ico" />

const link = document.querySelector("[rel=icon],[rel=apple-touch-icon]");
console.dir(link.sizes); /* 出力結果:
  DOMTokenList [ "72x72", "114x114" ]
    0: "72x72"
    1: "114x114"
    length: 2
    value: "72x72 114x114"
  */
console.log(link.sizes.value); // 出力結果: '72x72 114x114'
console.log(link.sizes.length); // 出力結果: 2
console.log(link.sizes[0]); // 出力結果: '72x72'
console.log(link.sizes[1]); // 出力結果: '114x114'