HTML DOM の images コレクションとは？使い方とサンプルコードを解説
HTML DOM images コレクションとは
HTML DOM の images コレクションは、HTML ドキュメント内に存在するすべての <img> 要素のコレクション（HTMLCollection）を返すプロパティです。このコレクションを利用することで、ページ上の画像要素の総数を取得したり、インデックス番号や id を指定して特定の画像要素へアクセスしたりすることができます。
構文
images コレクションの基本的な構文は以下のとおりです。
document.images
プロパティ
images コレクションには、次のプロパティが用意されています。
| プロパティ | 説明 |
|---|---|
| length | HTML ドキュメント内の <img> 要素の総数を返します。 |
メソッド
images コレクションで利用できる主なメソッドは以下のとおりです。
| メソッド | 説明 |
|---|---|
| [index] | コレクションから、指定したインデックス番号の <img> 要素を返します。 |
| item(index) | コレクションから、指定したインデックス番号の <img> 要素を返します。 |
| namedItem(id) | コレクションから、指定した id 属性を持つ <img> 要素を返します。 |
使用例
それでは、images コレクションを使ってページ内の画像の数を取得する具体例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.btn{
background-color:lightblue;
border:none;
height:2rem;
border-radius:50px;
width:60%;
margin:1rem auto;
display:block;
}
.show{
color:#db133a;
font-size:2rem;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM Image Object Example</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg"
alt="Learn Spring">
<img src="https://www.tutorialspoint.com/hibernate/images/hibernate-mini-logo.jpg"
alt="Learn Hibernate">
<img src="https://www.tutorialspoint.com/sql/images/sql-mini-logo.jpg" alt="Learn
SQL">
<img src="https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg" alt="Learn
PL/SQL">
<button onclick="getCount()" class="btn">Count Number Of Images</button>
<div class="show"></div>
<script>
function getCount() {
document.querySelector('.show').innerHTML=document.images.length;
}
</script>
</body>
</html>出力結果
上記のコードを実行すると、次のような画面が表示されます。
「Count Number Of Images」ボタンをクリックすると、この Web ページ上に存在する画像の合計数が表示されます。
-
HTML DOMのcolumnRuleStyleプロパティとは？カラム罫線のスタイル設定方法を解説
columnRuleStyleプロパティとはHTML DOMのcolumnRuleStyleプロパティは、段組み（マルチカラム）レイアウトにおいて、カラム間に引かれる罫線（カラムルール）のスタイルを定義または取得するために使用されます。JavaScriptからこのプロパティを操作することで、罫線の見た目を動的に変更することが可能です。なお、罫線を実際に表示するには、段数を指定するcolumn-count、罫線の幅を指定するcolumn-rule-width、罫線の色を指定するcolumn-rule-colorなどのプロパティと併せて設定するのが一般的です。構文columnRuleStyleプロ
-
HTML DOMのcolumnRuleColorプロパティとは？段組み罫線の色を設定・変更する方法
columnRuleColorプロパティとはHTML DOMのcolumnRuleColorプロパティは、段組み（マルチカラム）レイアウトにおいて、列と列の間に引かれる罫線（区切り線）の色を設定または取得するために使用されます。このプロパティを活用することで、JavaScriptから動的に罫線の色を変更できます。構文columnRuleColorプロパティを設定する際の構文は以下のとおりです。object.style.columnRuleColor = "color|initial|inherit"指定できる値color：罫線の色を指定します（例：blue、#ff0000