HTMLElement.style.borderColor无法返回正确十六进制颜色值问题

浏览器会将元素的borderColor（哪怕是内联样式设置的十六进制颜色）自动转换为RGB格式字符串（例如rgb(255, 0, 184)），直接用十六进制值和element.style.borderColor做比较自然不匹配。另外element.style只能读取内联样式，无法获取通过样式表或CSS类设置的样式，这也是潜在的问题点。

推荐两种可靠的处理方式：

方式1：统一颜色格式后比较 #

通过getComputedStyle获取元素最终计算后的样式，再把目标十六进制颜色转换成RGB格式，统一格式后进行比较：

// 工具函数：将十六进制颜色转为RGB字符串
function hexToRgb(hex) {
  // 处理缩写十六进制（如#F0B）
  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
  
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? `rgb(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)})` : null;
}

function goToSlide3(){
  // 获取元素最终生效的样式
  const proComputedStyle = getComputedStyle(pro);
  const arcadeComputedStyle = getComputedStyle(arcade);
  
  // 转换目标颜色为RGB格式
  const targetProColor = hexToRgb("#FF00B8");
  const targetArcadeColor = hexToRgb("#FF8A00");
  
  if(proComputedStyle.borderColor === targetProColor || arcadeComputedStyle.borderColor === targetArcadeColor) {
    goToNextSlide();
  }
}

方式2：用CSS类标记状态（更推荐） #

不要直接通过颜色值判断元素状态，而是用CSS类来标记选中/激活状态，这种方式代码更清晰，完全避免颜色格式的兼容性问题：

/* 定义不同状态的样式类 */
.selected-pro {
  border-color: #FF00B8;
}
.selected-arcade {
  border-color: #FF8A00;
}

// 当元素需要进入对应状态时，添加类（例如用户点击时）：
// pro.classList.add('selected-pro');

function goToSlide3(){
  // 通过类判断元素状态
  if(pro.classList.contains('selected-pro') || arcade.classList.contains('selected-arcade')) {
    goToNextSlide();
  }
}

• element.style仅能读取元素的内联样式（直接写在style属性里的样式），如果样式是通过CSS类或外部样式表设置的，必须用getComputedStyle才能获取到最终生效的样式。
• 若你的颜色包含透明度，部分浏览器会返回rgba格式，此时需要调整工具函数适配rgba的格式判断。

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