11 - 1 : width() : 要素の幅を取得・設定する
ここでは、DOM要素にまつわる様々な情報を取得したり、情報を設定するメソッドを紹介していきます。
11.1 width() : 要素の幅を取得・設定する
DOM要素の幅を取得し、また設定します。ちなみにここでいう幅は、ボックスモデルでいうとコンテンツの幅になります。
要素の幅を取得する: $(‘要素名’).width();
要素の幅を設定する: $(‘要素名’).width(幅);
もし、paddingまで含めた要素の幅を取得したい場合はwidthメソッドの代わりにinnerWidthを、ボーダーまで含めたところの幅を取得したい場合はouterWidthメソッドを、marginまで含めたところの全体幅を取得したい場合はouterWidth(true)メソッドを使って下さい。
なお、要素が複数ある場合(p要素だったりclass要素だったり)は上から見て最初のものを選択します。
さて、ここでは、p要素の幅を取得してポップアップ表示を行うのと同時に、h1要素の幅を500ピクセルに設定しましょう。スクリプトはこのように表記します。
var haba = $('p').width();
alert("p要素の幅は"+haba+'ピクセルです');
$('h1').width('500px');