Native: Element

$関数を用いて、DOM要素がすべてのメソッドを使えるようにするカスタムネイティブです。

Elementメソッド: setStyle

要素にCSSプロパティを設定します。

構文:

myElement.setStyle(property, value);

引数:

1. property - (文字列) 設定したいプロパティ。
2. value - (いろいろ) 設定したい値。単位を必要とする数値は、自動的に'px'を付与されます。

戻り値:

• (要素) この要素。

例:

//両方とも同じ効果です。
$('myElement').setStyle('width', '300px'); //widthは300pxになりました。
$('myElement').setStyle('width', 300); //widthは300pxになりました。

注意点:

• 数値は自動的に近似整数値に丸められます。

Elementメソッド: getStyle

渡されたスタイルの値を返します。

構文:

var style = myElement.getStyle(property);

引数:

1. property - (文字列) 取得したいCSSプロパティ。

戻り値:

• (文字列) スタイルの値。

例:

$('myElement').getStyle('width'); //戻り値 "300px".

$('myElement').getStyle('width').toInt(); //戻り値 300.

Elementメソッド: setStyles

要素に対して複数のスタイルを設定します。

構文:

myElement.setStyles(styles);

引数:

1. styles - (オブジェクト) 設定したいスタイルのプロパティ＝値のペアを持つオブジェクト。

戻り値:

• (要素) この要素。

例:

$('myElement').setStyles({
    border: '1px solid #000',
    width: 300,
    height: 400

});

参考情報:

• Element:getStyle

Elementメソッド: getStyles

渡された引数に対応するスタイルを返します。

構文:

var styles = myElement.getStyles(property[, property2[, property3[, ...]]]);

引数:

1. properties - (文字列) スタイルプロパティを幾つでも。

戻り値:

• (オブジェクト) ブラウザによって計測されたCSSスタイルをキー＝値のペアに持つオブジェクト。

例:

$('myElement').getStyles('width', 'height', 'padding');

//戻り値 {width: "10px", height: "10px", padding: "10px 0px 10px 0px"}

参考情報:

• Element:getStyle