【jQuery入門】HTMLの属性を変更／取得する

attrメソッドで属性の値を設定する

属性の値を設定するには、attrメソッドを使う。引数には、設定したい名前、値の順で指定する

attrメソッドは{属性名: 値, ...}の形式で、複数の属性をまとめて設定することもできる

<ul id="sample1-list">
  <li class="jquery"><img src="https://placehold.jp/50x50.png" title="jquery"></li>
  <li class="js"><img src="https://placehold.jp/50x50.png"></li>
  <li class="css"><img src="https://placehold.jp/50x50.png"></li>
</ul>

$(function () {
  $("#sample1-list img:not([title])").attr("title", "ロゴ画像");
  $("#sample1-list .css > img").attr({
    alt: "alt",
    width: "70px"
  });
});

See the Pen
jQuery5-1 by shinjiezumi (@sezumi)
on CodePen.

attrメソッドで属性値を取得する

属性の値を取得する場合にも、attrメソッドを使う。

取得する場合は、attr(属性名)のように属性名だけを指定する。

なお、attr(属性名, 値)はセレクターに合致したすべての要素に対して設定を行いますが、attr(属性名)は合致した要素の最初のひとつの値を取得するだけ。(cssメソッドと同じ)

<ul id="sample2-list">
  <li class="jquery"><img src="https://placehold.jp/50x50.png" title="jquery"></li>
  <li class="js"><img src="https://placehold.jp/50x50.png"></li>
  <li class="css"><img src="https://placehold.jp/50x50.png"></li>
</ul>

$(function () {
  let title = $("#sample2-list .jquery img").attr("title");
  console.log(title);
});

See the Pen
jQuery5-1 by shinjiezumi (@sezumi)
on CodePen.

removeAttrメソッドで属性を削除する

設定されている属性を削除するには、removeAttrメソッドを使う。

引数には削除する属性の名前を指定する

<ul id="sample3-list">
  <li class="jquery"><img src="https://placehold.jp/50x50.png" title="jquery"></li>
  <li class="js"><img src="https://placehold.jp/50x50.png"></li>
  <li class="css"><img src="https://placehold.jp/50x50.png"></li>
</ul>

$(function () {
  $("#sample3-list .jquery img").removeAttr("title");
});

See the Pen
jQuery5-2 by shinjiezumi (@sezumi)
on CodePen.

height/widthメソッドで高さ、幅を取得／設定する

幅、高さを設定する場合はcssメソッドやattrメソッドを利用するよりも専用のheight、widthメソッドを利用した方が便利

<ul id="sample4-list">
  <li class="jquery"><img src="https://placehold.jp/50x50.png" title="jquery"></li>
  <li class="js"><img src="https://placehold.jp/50x50.png"></li>
  <li class="css"><img src="https://placehold.jp/50x50.png"></li>
</ul>

$(function () {
  $("#sample4-list .jquery img").height(40);
  $("#sample4-list li:not(.jquery) > img").width(30);

  let height = $("#sample4-list .jquery img").height();
  let width = $("#sample4-list li:not(.jquery) > img").width();

  console.log(height);
  console.log(width);
});

See the Pen
jQuery5-3 by shinjiezumi (@sezumi)
on CodePen.

css、attrメソッドと同じく、設定値を省略した場合、height,widthメソッドはセレクターに合致した最初の要素の値だけを返す。

なお、jQueryでは、height,widthメソッドのほかにも、高さ、幅に関する情報を取得するためのメソッドとして、innerHeight/innerWidth, outerHeight/outerWidthなどが用意されている

イメージ

高さ、幅に関連するメソッド（○はその要素をサイズに加味することを意味）

メソッド名	padding	border-width	margin
height()/width()	×	×	×
innerHeight()/innerWidth()	○	×	×
outerHeight()/outerWidth()	○	○	×
outerHeight(true)/outerWidth(true)	○	○	○

scrollTop／scrollLeftメソッドでスクロール位置を取得／設定する

scrollTop／scrollLeftメソッドを利用することで、ページ内でのスクロール位置を取得／設定することができる

以下はページロード時に、100x150の位置にページを自動スクロールする例

<div>
  <p>
    ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ</p>
</div>

$(function () {
  const _p = $(window);
  _p.scrollTop(100);
  _p.scrollLeft(150);

  console.log(_p.scrollTop() + "x" + _p.scrollLeft());
});

See the Pen
jQuery5-4 by shinjiezumi (@sezumi)
on CodePen.

$(window)のwindowは、ブラウザそのものを表すブラウザ標準のオブジェクトで、例えばwindow.scrollTop(100)のように、jQueryオブジェクトのメソッドを呼び出すことはできない

そこで、windowオブジェクトを$()関数で囲むことで、windowオブジェクトにjQueryオブジェクトとしての機能を与えることができる

height／widthメソッドを使って、ウィンドウやページのサイズを調べる

$(window)、$(document)という書き方を利用することで、ウィンドウ（現在表示されているページの領域）やページ全体のサイズを取得することもできる

$(document)のdocumentはブラウザに表示されているページそのものを表すブラウザ標準のオブジェクトで、$(window)と$(document)の違いは、前者がブラウザに表示されている領域のサイズを表すのに対して、後者が（表示されていない部分も含めた）ページ全体のサイズを返す点

$(function () {
  const windowSize =
    'ウィンドウサイズ：' + $(window).height() + "x" + $(window).width();
  const pageSize =
    'ページサイズ：' + $(document).height() + "x" + $(document).width();

  console.log(windowSize);
  console.log(pageSize);
});