Node
リセット対象のNodeを指定 id値を文字列で指定してもよい ／ 省略した場合はkclamp属性を持つ全Nodeが対象
●必須引数 ●オプション引数(省略可能)
記述例
$clampReset()
$clampReset('aNode')
注意点
CSSを初期状態に戻すため、対象Nodeの該当する属性の初期値が適切にCSSに記述されていない場合には
予想外の動きをするので注意して使用すること。
(例) NodeのwidthをCSSでは指定せずに、$clamp()の処理だけで決定している場合、$clampReset()を実行するとCSS上では
widthは『未設定』の状態となる。
スマホでは、CSS標準のclamp()の方が指定しやすいのでそれを利用すること。また、この関数は「cellPhone」が false でも機能するが、$clamp() は機能しないので理解して使用すること。
動作サンプル
このページの onresize には $clamp() が設定されているので、ブラウザサイズを変更して以下で動作確認をする。
[sample1] FS_20_2%_0 LS_3_0.3%_0
font-sizeとletter-spacingを可変・上限ナシ
[sample2] H_50_5%_75 PT_30_3%_45
heightとpadding-topを可変
[sample3] widthを可変 ／ border-radiusを可変・上限ナシ
[sample3a]
W_300_30%_450
W_300_30%_450
[sample3b]
W_400_40%_600 BR_6_0.6%_0
W_400_40%_600 BR_6_0.6%_0
[sample4] BGW_50_5%*2_0
background-size(width)を可変・演算付き・上限ナシ
Javascript :
function clampreset_sample() {
$clampReset('sample1');
$clampReset('sample2');
$clampReset('sample3a');
$clampReset('sample3b');
$clampReset('sample4');
}
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。