新規投稿
フォローする

DOM操作の方法を教えて下さい。

Chrome デベロッパーツールでkintoneアプリをカスタマイズする際、

目的の要素のコードが「Element」タブにハイライトされて表示されますが、

そのあと jsファイルの何処に、どのように記述するのか感覚がわかりません。

例えば、文字列(1行)を指して

<div class="control-gaia control-single_line_text-field-gaia field-5522386 control-show-gaia" style="box-sizing: border-box; width: 549px; height: auto;">

と、ハイライトされている状態で文字列(1行)の位置を少し右へ移動させたい場合は、jsファイルの何処に、どのように記述をすればよろしいのでしょうか。

また、見よう見真似でカスタマイズしていますと、1つの文字列(1行)だけを触りたいのに全体の文字列(1行)が一緒に変更される事があります。特定の要素のみをカスタマイズする方法を教えて下さい。

よろしくお願いします。

0

6件のコメント

Avatar
江田篤史

グラス様

お世話になっております。
トヨクモの江田と申します。

「field-5522386」がその要素固有の値になるので、その値を用いて要素指定すると良いと思います。

document.getElementsByClassName('field-5522386')[0].style.marginLeft = '100px';
0
Avatar
グラス

回答ありがとうございます。

早速ですが、document.getElementsByClassName や[0]は何処から導き出されたのでしょうか。

デベロッパーツールの何処を確認すればわかるのでしょぅか。

あと、教えて頂いたコードは、jsファイルのどの辺りに記述すればよろしいでしょうか。

 

よろしくお願いいたします。

0
Avatar
江田篤史

グラス様

お世話になっております。

document.getElementsByClassName()は、ブラウザのJavaScriptエンジンで標準実装されているメソッドです。
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName
第一引数で指定したclassを持つ要素を全て取得して、配列風のオブジェクトとして返すので、ある1つを取得する場合はインデックスを指定する必要があります。
今回の場合は「field-5522386」を持つのは1つだけなので、[0]を指定すれば目的の要素を取得できます。

デベロッパーツールのConsoleタブでJavaScriptコードは実行できます。

jsファイルの場合は、kintone.events.on()のイベントハンドラ内に記述することになります。

(function() {
  "use strict";
  kintone.events.on([
    'app.record.detail.show',
  ], function(){
    document.getElementsByClassName('field-5522386')[0].style.marginLeft = '100px';
  });
})();
0
Avatar
グラス

回答ありがとうございます。

ですが、解りません。もう少し質問を受けて下さい。お願いします。

元々、デベロッパーツールでハイライトされた行の内容(記述)の、どの文字列で判断すれば「JavaScriptエンジンで標準実装されているメソッド」に

たどり着くのでしょうか。

初心者がハイライトされた行の内容(記述)からソコへ行く方法や、調べるきっかけとなるモノ (とかキーワード) が知りたいです。

 

よろしくお願いいたします。

0
Avatar
江田篤史

グラス様

お世話になっております.

デベロッパーツールで調べる場合,Elementsタブを開いて目的の要素の記述箇所で右クリック,Copy > Copy JS pathでクリップボードにコピーされるので,それを貼り付ければよいです.

0
Avatar
グラス

回答ありがとうございます。

教えて頂いた事を足掛かりにアプリの作成を進めていきます。

ありがとうございました。

 

もし、可能ならば ↓ の方の質問もよろしくお願いいたします。

https://developer.cybozu.io/hc/ja/community/posts/360055511032-DataTables%E3%81%AE%E6%A4%9C%E7%B4%A2%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

 

0
サインインしてコメントを残してください。