이번에는 kintone UI Component의 드롭다운 텍스트 색상이 변경됩니다.
※ DOM 작업을 해야 하므로 킨톤 UI Component의 사양이 변경되면 사용할 수 없습니다.

어플리케이션 준비

공백 필드를 설정합니다.
요소 ID는spDropdown입니다.

JavaScript

↓ 를 참조하여 kintone UI Component 에 대해 설명합니다.
※ 본 기사에 사용된 버전은 1.0.3

드롭다운 설정

// ドロップダウンを設置するスペースフィールドの要素を取得
const spDropdown = kintone.app.record.getSpaceElement("spDropdown");

// ドロップダウンをつくる
const drColors = new Kuc.Dropdown({
  label: "ドロップダウン色変え",
  items: [
    { label: "あか", value: "red" },
    { label: "あお", value: "blue" },
    { label: "みどり", value: "green" },
    { label: "だいだい", value: "orange" },
    { label: "くろ", value: "black" },
  ],
});

// スペースフィールドにドロップダウンを置く
spDropdown.appendChild(drColors);

드롭다운 선택

쉽게 말하면 세 번째<span> 라벨이라 두 번째다.
※ 킨톤 UI Component의 사양이 변경되면 작동이 불가능할 수 있습니다.

// ドロップダウンを選択したときのイベント
drColors.addEventListener("change", (e) => {
  const b = drColors.querySelectorAll("span");
  b[2].style.color = e.detail.value;
  b[2].style.fontWeight = "bold"; // お好みで太字に
});

드롭다운 색상

setInterval을 통해 색상을 설정합니다.색상은value가 가지고 있는 값을 직접 사용합니다.

// ドロップダウンの色設定
const set_interval_id = setInterval(() => {
  const lis = drColors.querySelectorAll("li");
  lis.forEach((e) => {
    e.style.color = e.getAttribute("value");
    e.style.fontWeight = "bold"; // お好みで太字に
  });

  clearInterval(set_interval_id);
}, 100);

총결산

내려가서 더 눈에 띄게 하려고!이럴 때는 사용량을 준수해서 사용하세요.