DOM操作の簡略化：
idの追加・削除
指定したNodeにidを設定する。または、設定済みのidを削除する。
Node
Nodeを渡す
String
設定するidを文字列で渡す 削除したい場合には空の文字列を渡す
Bool
既にidが設定されている場合は置換 true = 置換する ・ false = 処理しない ／ 削除操作の場合には省略可
●必須引数 ●オプション引数(省略可能)
記述例
$setId(this, 'new_id', true)
$setId(nodeArray[0], 'new_id', false)
$setId(this, '')
注意点
第2引数で渡したidが、ページ内で既に使われている場合には、$setId()関数自体を処理しない仕様。
動作サンプル
初期id：無し → $setId($getNodes('sample0',0),'sample1',true)
SAMPLE 1
Sass :
.sample0 {
color: #000;
font-weight: 400;
}
#sample1 { //背景ブルー・文字ホワイト
color: #fff;
background-color: #8eb8bd;
}
#sample2a { //背景レッド・文字ホワイト
color: #fff;
background-color: #bd8e9e;
}
#sample2b { //背景ゴールド・文字ブラック
color: #000;
background-color: #bdb88e;
}
#sample3 { //背景ブルー・文字ボールド
font-weight: 700;
letter-spacing: 3px;
background-color: #8eb8bd;
}
#sample4a { //文字イタリック
font-weight: 400;
font-style: italic;
letter-spacing: 10px;
}
#sample4b { //文字ノーマル
font-weight: 400;
}
Javascript :
$setId($getNodes('sample0',0),'sample1',true);
初期id：#sample2a → $setId($getNodes('sample0',1),'sample2b',true)
SAMPLE 2
Javascript :
$setId($getNodes('sample0',1),'sample2b',true);
初期id：#sample3 → $setId($getNodes('sample0',2),'')
SAMPLE 3
Javascript :
$setId($getNodes('sample0',2),''); //既存idの削除処理
初期id：#sample4a → $setId($getNodes('sample0',3),'sample4b',false)
SAMPLE 4
Javascript :
$setId($getNodes('sample0',3),'sample4b',false);
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。