如何实现颜色选择器输入值动态同步到变量并更新CSS变量？

我的网站上有一个Color picker（颜色选择器），其中包含一个名称为acf[field_65d8d325d69cb]的输入框，其值会随选中的颜色动态变化。我尝试将该输入框的动态值赋值给变量colorValue，代码如下：

// Retrieve the input element based on its name
var inputElement = document.querySelector('input[name="acf[field_65d8d325d69cb]"]');

// Check if the input element is found
if (inputElement) {
  // If found, assign the value to the variable colorValue
  var colorValue = inputElement.value;

  // Create a new style element
  var styleElement = document.createElement('style');

  // Set the CSS style content with the value from the input
  styleElement.textContent = '.editor-styles-wrapper { --theme-palette-color-10: ' + colorValue + ' !important; }';

  // Append the new style element to the head section of the document
  document.head.appendChild(styleElement);
} else {
  console.error('Input element not found.');
}

我希望实现colorValue随Color picker的选中颜色动态变化，请问该如何实现？

要让colorValue随颜色选择器的变化实时更新，核心是监听输入框的值变化事件，并在事件触发时重新更新CSS变量。具体修改如下：

1. 复用已创建的style元素，避免重复添加DOM节点
2. 监听输入框的input或change事件（input事件会在值变化时立即触发，更适合实时更新场景）
3. 在事件回调中同步更新colorValue和style元素的内容

修改后的完整代码：

// 获取目标输入元素
var inputElement = document.querySelector('input[name="acf[field_65d8d325d69cb]"]');

if (inputElement) {
  // 提前创建style元素并添加到head，避免重复创建
  var styleElement = document.createElement('style');
  document.head.appendChild(styleElement);

  // 定义更新CSS变量的函数
  function updateColorVariable() {
    var colorValue = inputElement.value;
    styleElement.textContent = '.editor-styles-wrapper { --theme-palette-color-10: ' + colorValue + ' !important; }';
  }

  // 初始化时执行一次，设置初始颜色
  updateColorVariable();

  // 监听输入框值变化，实时更新
  inputElement.addEventListener('input', updateColorVariable);
  // 可选：若颜色选择器通过change事件触发值变更，添加此监听
  inputElement.addEventListener('change', updateColorVariable);
} else {
  console.error('Input element not found.');
}

关键说明 #

• 实时响应：使用input事件可以在拖动颜色滑块、直接输入色值时立即更新CSS变量；
• DOM优化：复用单个style元素，避免每次颜色变化都新增DOM节点，减少冗余；
• 初始值生效：初始化时调用更新函数，确保页面加载时就能应用颜色选择器的初始选中值。

内容的提问来源于stack exchange，提问作者D_P