通过js修改input、select默认字体颜色

修改input、select默认字体颜色是前端开发中经常遇到的需求。通过js修改默认字体颜色的方法有多种，在这里我们介绍两种常用的方法。

方法一：使用CSS样式修改

1. 首先，为表单元素定义需要的CSS样式，例如：

input, select {
    font-size: 16px;
    color: #333;
}

1. 在页面的head标签中，定义一个ID为“myStyle”的style元素，将上述样式写入其中。

<style id="myStyle">
    input, select {
        font-size: 16px;
        color: #333;
    }
</style>

1. 使用js获取这个style元素，修改其中的文本内容，将颜色值改为需要的值。

var myStyle = document.getElementById("myStyle");
myStyle.innerHTML = myStyle.innerHTML.replace(/color:\s*#[a-zA-Z0-9]+;/, 'color: red;');

这种方法适用于在页面加载时就需要修改颜色的情况，同时可以根据需要修改其他属性和样式。

方法二：修改attribute属性

1. 使用js获取input或select元素，使用setAttribute方法修改其color属性。例如，修改一个ID为“myInput”的input元素的颜色：

var myInput = document.getElementById("myInput");
myInput.setAttribute("color", "red");

1. 如果需要修改的是select元素的option选项的颜色，需要先获取这个select元素，然后遍历其中的option元素，并使用setAttribute方法修改其color属性。例如，将一个ID为“mySelect”的select元素中所有option选项的字体颜色改为红色：

var mySelect = document.getElementById("mySelect");
var options = mySelect.getElementsByTagName("option");
for (var i = 0; i < options.length; i++) {
    options[i].setAttribute("color", "red");
}

方法二适用于需要在交互过程中动态改变字体颜色的情况，同时可以批量修改多个元素的颜色属性。

无论采用哪种方法，都可以通过js代码动态修改input、select元素的默认字体颜色。