オブジェクト操作方法(数値操作方法)

数値処理方法

要素のプロパティを操作するときに使用する方法で、選択したオブジェクトの寸法と位置寸法の値をインポートまたは作成または変更できます。

	<div></div>

	div{
    		height: 300px;
    		border: 1px solid #000;
       }

$('div').width(500);
console.log($('div').width());

生成幅500のcss border値は両側に1 pxずつあるので502と表示される。

コンソール値はwidth()で表される500です。(border値を除外)

  div{
      width: 500px;
      height: 300px;
      border: 1px solid #000;
  }

今回はwidth()ではなく、cssで入れる場合も見てみましょう。

cssを使用して入れたのはborder-boxで、border値がwidthに含まれているため、表示時は500

border値がwidthに含まれるため、width()はborder値を減算し、−2 px 498を生成する値を取得する。

	<div></div>

	div{
    		width: 500px;
    		border: 1px solid #000;
       }

$('div').height(300);
console.log($('div').height());

生成高さ500のcss border値はheight(300)であり,両側に1 pxずつ表示され,302である.

コンソール値はheight()で表される300です。(border値を除外し、box-size:border-boxを一定に保つ)

  div{
      width: 500px;
      height: 300px;
      border: 1px solid #000;
  }

今回はheight()を見ず、cssで入れる様子も見てみます。

cssを使用して入れたのはborder-boxで、border値がwidthに含まれているため、表示時は300

border値height()が含まれているため、height()はborder値を減算し、1つの値-2 px 298を得る。