HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Linkオブジェクトのsizesプロパティとは？使い方とサンプルコード解説

HTML DOM Linkオブジェクトのsizesプロパティとは

HTML DOMのLinkオブジェクトにおけるsizesプロパティは、link要素に設定されたsizes属性の値を返します。sizes属性は、ファビコンなどのリンクされたアイコンの表示サイズを指定するために使用される属性です。

注意：sizesプロパティは、rel属性が「icon」に設定されている場合にのみ有効です。それ以外の場合は、空の文字列が返されます。

構文

sizesプロパティの基本的な構文は以下のとおりです。

sizes属性の値を取得する場合：

linkObject.sizes

戻り値

link要素のsizes属性の値を表す文字列を返します。sizes属性が設定されていない場合は、空の文字列が返されます。

サンプルコード

実際にLink sizesプロパティを使用した例を見てみましょう。次のコードでは、sizes属性が「10x10」に設定されたアイコン用のlink要素を取得し、そのサイズが特定の値と一致するかどうかを判定して結果を画面に表示します。

<!DOCTYPE html>
<html>
<head>
<title>Link sizes</title>
<link id="extStyle" rel="icon" href="new.gif" sizes="10x10">
</head>
<body>
<form>
<fieldset>
<legend>Link-sizes</legend>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var extStyle = document.getElementById("extStyle");
   if(extStyle.sizes == '10x10')
      divDisplay.textContent = 'The linked icon size: '+extStyle.sizes+' is not compatible';
   else
      divDisplay.textContent = 'Congrats! The linked icon size is compatible';
</script>
</body>
</html>

上記の例では、まずidが「extStyle」であるlink要素への参照を取得し、そのsizes属性の値をif文で判定しています。値が「10x10」と一致した場合と一致しなかった場合とで、それぞれ異なるメッセージが表示される仕組みです。

また、ページのレイアウトを整えたい場合は、外部スタイルシート「style.css」に以下のようなスタイルを定義しておくこともできます。

form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input[type="button"] {
   border-radius: 10px;
}

実行結果

このコードをブラウザで実行すると、以下のような出力が表示されます。

HTML DOM Linkオブジェクトのsizesプロパティとは？使い方とサンプルコード解説

この例ではsizes属性の値が「10x10」であるため、条件式がtrueとなり、「The linked icon size: 10x10 is not compatible」というメッセージが出力されます。もしsizes属性の値が別のものであれば、else側の処理が実行され、「Congrats! The linked icon size is compatible」と表示されます。

  1. HTML DOMのnameプロパティとは？構文と使い方を実例で解説

    HTML DOMのnameプロパティとはHTML DOMのnameプロパティは、要素が持つ属性の名前（属性名）に対応する文字列を返すプロパティです。JavaScriptを使って要素の属性情報を動的に取得したい場合に活用できます。構文nameプロパティの基本的な構文は以下のとおりです。【文字列値を返す場合】elementAttribute.name対象となる属性ノードに対して「.name」を記述するだけで、その属性名を文字列として取得できます。HTML DOM nameプロパティの使用例ここでは、img要素の属性名を取得して画面に表示するサンプルコードを紹介します。「Get Answer」ボタン

  2. HTML DOM textContentプロパティの使い方を徹底解説

    HTML DOMのtextContentプロパティは、ノードおよびそのすべての子ノードが持つテキスト（空白文字を含む）に対応する文字列を、取得・設定できるプロパティです。JavaScriptでDOM操作を行う際に、要素内のテキストを簡単に扱うために広く利用されています。textContentプロパティの構文文字列値の取得Node.textContent戻り値は以下のいずれかになります。documentノードの場合は「null」指定したノードとそのすべての子ノードのテキスト文字列値の設定Node.textContent = string注意： textContentプロパティに値を設定すると、ノ