如何用JavaScript根据边框颜色条件修改input输入框背景色

• 元素选择错误：document.getElementsByClassName 返回的是符合类名的元素集合，不是单个DOM元素，无法直接对集合操作style属性修改样式。
• 赋值运算符使用错误：代码中修改背景色时用了比较运算符==，只会返回布尔值，不会执行赋值操作，样式不会被修改。
• 样式读取逻辑错误：element.style 只能读取元素行内style属性中定义的样式，无法读取CSS类定义的样式。且不同浏览器返回的颜色格式可能存在差异（如返回rgb()格式而非十六进制），直接判断borderColor == '#c30'几乎不可能匹配成功。
• 没有做元素存在校验：如果目标元素还没加载完成就执行JS，会出现属性读取报错。

方案1：纯CSS实现（推荐） #

直接通过类选择器匹配校验不通过的输入框，不需要JS，性能和稳定性更高：

input#numberfield-inputF1.x-form-invalid-field {
    background-color: #c30 !important;
}

方案2：JS实现 #

如果必须用JS动态控制，修正后代码如下：

// 加input前缀避免选中同id的td元素，精准定位输入框
const inputField = document.querySelector('input#numberfield-inputF1');

if (inputField) {
    // 判断校验失效的类/属性标记，比判断边框色兼容性、准确性更高
    const isInvalid = inputField.classList.contains('x-form-invalid-field') 
                    || inputField.getAttribute('aria-invalid') === 'true';
    inputField.style.backgroundColor = isInvalid ? '#c30' : '#fff';
}

如果确实需要根据实际渲染的边框色判断，可以用getComputedStyle读取元素最终生效的样式：

const inputField = document.querySelector('input#numberfield-inputF1');
if (inputField) {
    const computedStyle = window.getComputedStyle(inputField);
    // #c30对应的rgb格式为rgb(204, 51, 0)
    const isRedBorder = computedStyle.borderColor === 'rgb(204, 51, 0)';
    inputField.style.backgroundColor = isRedBorder ? '#c30' : '#fff';
}

如果JS执行时机早于DOM渲染完成，需要把代码包裹在DOM加载完成的事件回调中，避免获取不到元素：

document.addEventListener('DOMContentLoaded', function() {
    // 上述逻辑代码放此处
})

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