DOM操作をできるだけ日本語でラクにやりたいプラグイン

DOM和スタイルとDOM和属性の強化とDOM操作関係の命令を追加。毎回調べないと綴れないのねん😰　ついでに個人的によく使う命令もまとめておく。

エディタ

プログラム

#----------------------------------------------------
＃DOM和スタイル追加したい！
#----------------------------------------------------

ナデシコバージョンを「.」で区切る。
もし、(それ[1]≦4)かつ(それ[2]＜3)ならば、
    DOM和属性＝空配列。
違えば、
    追加和属性＝{
        "チェック": "checked", 
        "非表示": "hidden",
        "値":"value"
    }
    追加和属性を反復。
        DOM和属性[対象キー]＝対象。
    ここまで。
ここまで。
DOM和スタイル追加。
●DOM和スタイル追加
　追加和スタイル＝{
    "基準位置":"position",
    "絶対位置":"absolute",
    "相対位置":"relative",
    "上": "top",
    "下":"bottom",
    "均等":"justify",
    "標準":"normal",
    "透明度": "opacity", 
    "角丸":"border-radius",
    "文字間":"letter-spacing",
    "行高":"line-height",
    "行高さ":"line-height",
    "フォント名":"font-family",
    "文字太":"font-weight",
    "文字太さ":"font-weight",
    "回転":"rotate",
    "チェック": "checked", 
    "非表示": "hidden",
    "無効化": "disabled",
    "値":"value"
  }
　追加和スタイルを反復
　　DOM和スタイル[対象キー]＝対象。
　ここまで。
ここまで。
# もっと追加したいが置き換えの日本語考えるの難しい＞＜

#----------------------------------------------------
＃DOM操作を日本語でラクにやりたい追加命令
#----------------------------------------------------
●(DOMを)絶対位置配置
　　DOMの「position」に「absolute」をDOMスタイル設定。
ここまで。

# Aは-2147483647～2147483647の整数。
●(DOMをAに)重なり設定
　　DOMの「z-index」にAをDOMスタイル設定。
ここまで。

●(DOMをAに)可視変更
　　もし、A=オンならば
　　　　DOMの「visibility」に「visible」をDOMスタイル設定。
　　違えば、
　　　　DOMの「visibility」に「hidden」をDOMスタイル設定。
　　ここまで。
ここまで。

●(DOMの)可視
　DOMの「visibility」をDOMスタイル取得。
　もし、それ＝「visible」ならば、オンで戻る。
　違えば、オフで戻る。
ここまで。

●(DOMの)チェック状態
　DOMの「checked」をDOM属性取得。
　もし、それ＞０ならば、オンで戻る。
　違えば、オフで戻る。
ここまで。

●(DOMをAに)チェック設定
　　もし、A＝オンならば
　　　　DOMの「checked」にオンをDOM属性設定。
　　違えば、
　　　　DOMの「checked」にオフをDOM属性設定。
　　ここまで。
ここまで。

●(DOMを)DOM無効化設定
　　DOMの「disabled」にオンをDOM属性設定。
ここまで。
●(DOMを)DOM有効化設定
　　DOMの「disabled」にオフをDOM属性設定。
ここまで。
#----------------------------------------------------
●(DOMをXYに)DOM位置設定
　Xとは変数＝XY[0]。Yとは変数＝XY[1]。
　DOMの「左」に「{X}px」をDOMスタイル設定。
　DOMの「top」に「{Y}px」をDOMスタイル設定。
ここまで。

●(DOMをWHに)DOMサイズ設定
　Wとは変数＝WH[0]。Hとは変数＝WH[1]。
　DOMの「幅」に「{W}px」をDOMスタイル設定。
　DOMの「高さ」に「{H}px」をDOMスタイル設定。
ここまで。
#----------------------------------------------------

#----------------------------------------------------
＃個人的によく使う命令
//v3.3.83で配列入れ替えが実装されたので削除。
#----------------------------------------------------
＃＃配列関係
# なでしこ３の「配列検索」が開始位置を指定出来ず不便。
●(AのIからKEYを)配列検索ｖ１
　数をIから(Aの配列要素数)-1まで繰り返す。
　　　もし、A[数]＝KEYならば、数で戻る。
　ここまで。
　-1で戻る。
ここまで。
#----------------------------------------------------

＃＃ユーザーの環境を取得
●デスクトップ幅
　　「window.screen.width」をJS実行。
ここまで。

●デスクトップ高さ
　　「window.screen.height」をJS実行。
ここまで。

●クライアント幅
　　「document.documentElement.clientWidth」をJS実行。
ここまで。

●クライアント高さ
　　「document.documentElement.clientHeight」をJS実行。
ここまで。

●アクセスデバイス
　UAとは変数＝「navigator.userAgent;」をJS実行。
　iPhoneとは変数＝UAの0から「iPhone」を文字検索。
　iPadとは変数＝UAの0から「iPad」を文字検索。
　Androidとは変数＝UAの0から「Android」を文字検索。
　Mobileとは変数＝UAの0から「Mobile」を文字検索。
　もし、(iPhone＞０)または((Android＞０)かつ(Mobile＞０))ならば、「スマホ」で戻る。
　違えば、もし、(iPad＞０)または(Android＞０)ならば、「タブレット」で戻る。
　違えば、「ＰＣ・その他」で戻る。
ここまで。
#----------------------------------------------------

＃以下はテスト
もし、プラグイン名＝「メイン」ならば、
    「◆DOM和属性」を表示
    DOM和属性をJSONエンコード整形して表示。
    「◆DOM和スタイル」を表示
    DOM和スタイルをJSONエンコード整形して表示。
/*
    テスト＝「テスト」のチェックボックス作成。
    テストの「チェック」にオンをDOM属性設定。
    確認ボタン＝「チェック確認」のボタン作成。
    確認ボタンをクリックした時には、テストの「チェック」をDOM属性取得して言う。。。
*/
ここまで。

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ