ImpressCMS
HOME  >  JSCRIPT  > 要素の様々な情報の取得と設定(1) > width() : 要素の幅を取得・設定する

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');

 
Publish : 1596 bytes - updated 2024-07-10 by 管理人