primeng 如何內聯樣式復選框？

Question

如何使用p-checkbox的style輸入來改變復選框的邊框和背景顏色？ 我已經嘗試過[style]="{'background': '#ff0000'}" 。 但這僅將樣式應用於包含實際復選框的 div。 所以沒用。 相反，我需要更改具有類p-checkbox-box和p-highlight的 div 的border-color和background 。 注意：我不能在這里使用 CSS，因為 colors 是動態的並且依賴於內容。

Answer 1

您可以使用 renderer2 來操作 DOM 元素，然后添加樣式：

1. 使用document.getElementsByClassName('p-checkbox-box')獲取所有復選框

2. 遍歷每個元素並使用renderer2.setStyle()添加你想要的樣式

嘗試這段代碼並將其添加到ngAfterViewInit()中：

  let chkboxes = document.getElementsByClassName('p-checkbox-box')
    for (let index = 0; index < chkboxes.length; index++) {
      const element = chkboxes[index];
      this._renderer2.setStyle(element,'background-color','#bf2222');
      this._renderer2.setStyle(element,'border-color','#bf2222');
    }