DOM操作の簡略化：
Nodeに設定されているstyle一覧を取得
Nodeに設定されているstyleの一覧を連想配列で取得する。または、指定したプロパティの値を直接取得する。
Node
Nodeを指定 id値を文字列で指定してもよい
String
CSSプロパティ名を文字列で指定 キャメルケースでもよい (例) font-size ／ fontSize
●必須引数 ●オプション引数(省略可能)
記述例
$getStyle($id('item_1'))
$getStyle('item_1', 'padding-top')
$getStyle('item_1', 'paddingTop')
戻り値
○CSSプロパティ名を指定しない場合
・styleの一覧を連想配列で返す。
・連想配列に対して、Result.marginTop のようにドット記法＋キャメルケースでプロパティにアクセス可能。
○CSSプロパティ名を指定した場合
・値を返す。
・値が数値の場合には $unitToNum() で単位を外した数値を返す。
・値が文字列の場合にはそのまま返す。
動作サンプル
SAMPLE 1
Sass :
#sample1 {
margin-top: 25px;
padding: 30px 0;
font-size: 24px;
text-align: center;
border-radius: 8px;
}
Javascript :
$getStyle('sample1').padding;
$getStyle('sample1').borderRadius;
$getStyle('sample1','marginTop');
$getStyle('sample1','font-size')+'／'+$getStyle('sample1','text-align');
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。