js设置input字体颜色

<input type="text" id="myInput" value="这是输入框内容">

// 获取输入框元素
var inputElement = document.getElementById('myInput');

// 设置字体颜色为红色
inputElement.style.color = 'red';

function setInputColor() {
    var inputElement = document.getElementById('myInput');
    if (inputElement.value.length > 10) {
        inputElement.style.color = 'blue'; // 长度超过10时设置为蓝色
    } else {
        inputElement.style.color = 'green'; // 否则设置为绿色
    }
}

// 绑定函数到输入框的输入事件
document.getElementById('myInput').addEventListener('input', setInputColor);

.red-text {
    color: red;
}

.blue-text {
    color: blue;
}

function toggleInputColor() {
    var inputElement = document.getElementById('myInput');
    if (inputElement.classList.contains('red-text')) {
        inputElement.classList.remove('red-text');
        inputElement.classList.add('blue-text');
    } else {
        inputElement.classList.remove('blue-text');
        inputElement.classList.add('red-text');
    }
}

// 绑定切换颜色的函数到按钮点击事件
document.getElementById('toggleColorButton').addEventListener('click', toggleInputColor);