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行)が一緒に変更される事があります。特定の要素のみをカスタマイズする方法を教えて下さい。
よろしくお願いします。
グラス様
お世話になっております。
トヨクモの江田と申します。
「field-5522386」がその要素固有の値になるので、その値を用いて要素指定すると良いと思います。
document.getElementsByClassName('field-5522386')[0].style.marginLeft = '100px';
回答ありがとうございます。
早速ですが、document.getElementsByClassName や[0]は何処から導き出されたのでしょうか。
デベロッパーツールの何処を確認すればわかるのでしょぅか。
あと、教えて頂いたコードは、jsファイルのどの辺りに記述すればよろしいでしょうか。
よろしくお願いいたします。
グラス様
お世話になっております。
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';
});
})();
回答ありがとうございます。
ですが、解りません。もう少し質問を受けて下さい。お願いします。
元々、デベロッパーツールでハイライトされた行の内容(記述)の、どの文字列で判断すれば「JavaScriptエンジンで標準実装されているメソッド」に
たどり着くのでしょうか。
初心者がハイライトされた行の内容(記述)からソコへ行く方法や、調べるきっかけとなるモノ (とかキーワード) が知りたいです。
よろしくお願いいたします。
グラス様
お世話になっております．
デベロッパーツールで調べる場合，Elementsタブを開いて目的の要素の記述箇所で右クリック，Copy > Copy JS pathでクリップボードにコピーされるので，それを貼り付ければよいです．
回答ありがとうございます。
教えて頂いた事を足掛かりにアプリの作成を進めていきます。
ありがとうございました。
もし、可能ならば ↓ の方の質問もよろしくお願いいたします。