DOM操作の簡略化:

classの追加

指定したNodeにclassを設定する。

Node
Nodeを渡す
String
設定するclassを文字列で渡す
Bool
完全に置き換える true = 完全置換 ・ false = 追加 / 省略した場合は false となる
●必須引数 ●オプション引数(省略可能)

記述例

$setClass($id('aNode'), 'new_class')
$setClass(nodeAry[0], 'new_class', true)

動作サンプル

初期class:無し → $setClass($id('sample1','class_red')

SAMPLE 1
Sass : #sample1, #sample2, #sample3, #sample4 { color: #000; font-weight: 400; &.class_blue { //背景ブルー・文字ホワイト color: #fff; background-color: #8eb8bd; } &.class_red { //背景レッド・文字ホワイト color: #fff; background-color: #bd8e9e; } &.class_bold { //文字ボールド font-weight: 700; letter-spacing: 3px; } &.class_italic { //文字イタリック font-weight: 400; font-style: italic; letter-spacing: 10px; } }
Javascript : $setClass($id('sample1'),'class_red');

初期class:class_blue class_bold → $setClass($id('sample2','class_red',true)

SAMPLE 2
Javascript : $setClass($id('sample2'),'class_red',true);

初期class:class_bold class_blue → $setClass($id('sample3','class_red')

SAMPLE 3
Javascript : $setClass($id('sample3'),'class_red');

初期class:class_blue class_bold → $setClass($id('sample4','class_red',true); $setClass($id('sample4','class_italic');

SAMPLE 4
Javascript : $setClass($id('sample4'),'class_red',true); $setClass($id('sample4'),'class_italic');
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。