スポンサー

超軽量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)にします。

さらに

このスクリプトは時々更新しますので最新版を利用する場合は
<script src="https://tamralworld.com/library/dom_sen_v〇〇.js"></script>
の○○の部分を最新(v1やv2など)のものに置き換えてください。
※最新URLは当ページの最初に記載してあるものです。

広告

このブログの人気の投稿

【CSS】アニメーション等動作がカクカクする時の対処法

超軽量DOM操作ライブラリdom_sen.js var2