超軽量DOM操作ライブラリdom_sen.js var1
始めに
説明はこちらをご覧ください。
使い方
まず、もちろんですが読み込み方です。ライブラリを使用するソースコードより早い位置にこのソースコードを記述します。
<script src="https://tamralworld.com/library/dom_sen_v1.js"></script>
そして使用可能な関数一覧(使い方はのち)
- qsa()
- qs()
- qsa_html()
- qsa_text()
- qsa_display()
- d_html()
- d_text()
- d_CSS各指定()*
*後程詳しく
関数の使い方
qsa( CSSセレクタ )
document.querySelectorAll()
の省略です。
qs( CSSセレクタ )
document.querySelector()
の省略です。
qsa_html( CSSセレクタ , HTML)
Jqueryの
$(CSSセレクタ).html(HTML);
と同様です。
qsa_text( CSSセレクタ , テキスト)
Jqueryの
$(CSSセレクタ).text(テキスト);
と同様です。
qsa_display( CSSセレクタ , CSS[display]の値 );
CSSセレクタで選択した要素のスタイルのdisplayを変更します。
d_html( 属性ネーム , 属性ネームの値 , HTML )
属性ネームは要素の属性に「d_属性ネーム="属性ネームの値"」のように指定されている属性のHTMLを変更します。
例:
<span d_html="script1">変更前</span>
<script>
d_html("html","script1","変更後");
//属性d_htmlがscript1の要素のHTMLを「変更後」に変更
</script>
d_text( 属性ネーム , 属性ネームの値 , テキスト )
属性ネームは要素の属性に「d_属性ネーム="属性ネームの値"」のように指定されている属性のテキストを変更します。
例:
<span d_html="script1">変更前</span>
<script>
d_text("text","script1","変更後");
//属性d_htmlがscript1の要素のテキストを「変更後」に変更
</script>
d_display( 属性ネーム , 属性ネームの値 , CSSの値)
属性ネームは要素の属性に「d_属性ネーム="属性ネームの値"」のように指定されている属性のスタイルのdisplayを変更します。
例:
<span d_html="script1">変更前</span>
<script>
d_display("text","script1","none");
//属性d_htmlがscript1の要素のCSSのdisplayをnone(非表示)に変更
</script>
また、CSSの変更は次の関数が利用可能です。※使い方は同様
- d_display()
- d_opacity()
- d_width()
- d_height()
- d_color()
- d_background()
- d_border()
- d_border_radius()
- d_top()
- d_left()
- d_bottom()
- d_right()
- d_position()
- d_margin()
- d_padding()
- d_transition()
- d_transform()
このように、基本的に変更するスタイルはそろっています。
dalete_margin( CSSセレクタ )
CSSセレクタに指定した要素のmarginを削除(0)にします。
さらに
このスクリプトは時々更新しますので最新版を利用する場合は
※最新URLは当ページの最初に記載してあるものです。
<script src="https://tamralworld.com/library/dom_sen_v〇〇.js"></script>
の○○の部分を最新(v1やv2など)のものに置き換えてください。※最新URLは当ページの最初に記載してあるものです。