操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

今天工作中需要構建這樣的一個UI，有三個不同的顏色按鈕，點擊按鈕會將其底部的3D模型的外觀顏色更新為該按鈕的data-color中的顏色。更新3D模型顏色這個功能是 那邊的代碼實現的，那么我這邊需要給每一個color-增加一個::after偽元素，并將偽元素的背景顏色也設置為data-color中的顏色。

HTML

  <div class="wrapper">
    <button class="color-picker" data-color="#000000">button>
    <button class="color-picker selected" data-color="#ff6601">button>
    <button class="color-picker" data-color="#ddb212">button>
  div>

首先想到的就是通過屬性選擇器定位到各自的按鈕js點擊改變背景顏色，修改背景顏色。

css">[data-color="#000000"]::after {
  background-color: #000000;
}
[data-color="#ff6601"]::after {

  background-color: #ff6601;
}
[data-color="#ddb212"]::after {
  background-color: #ddb212;
}

這種方法有一個弊端，就是假如我的html上面的data-color顏色更新的話，就要同時去CSS中找到這些代碼，同步更新這個顏色，三個按鈕工作量還好，如果按鈕多了就會影響效率了。

還有一個想法是通過CSS attr()函數設置背景顏色js點擊改變背景顏色，attr函數尚未得到瀏覽器支持，所以這個辦法行不通。

.color-picker::after {
  background-color: attr(data-color color);
}

/* attr()函數mdn文檔鏈接 */
https://developer.mozilla.org/en-US/docs/Web/CSS/attr()

所以目前我能想到的就是通過來實現，但是目前好像沒有辦法直接找到::after偽元素，那么只好通過在color-上面定義一個自定義屬性---color，然后在::after偽元素上接收這個自定義屬性。和CSS代碼分別如下：

const color_pickers = document.querySelectorAll('.color-picker');

color_pickers.forEach(item => {
  item.style.setProperty('--background-color', item.dataset.color);
});

.color-picker::after {
  background-color: var(--background-color);
}