JavaScript存储input元素style.color到变量 为何获取到空字符串

• 赋值逻辑错误：你的首行代码将textColor变量赋值为input DOM元素对象本身，而非该元素的style.color属性值，第二行又尝试将style.color赋值为DOM对象，属于类型不匹配的错误操作，无法得到预期的颜色值。
• style属性取值限制：HTMLElement.style仅能读取元素行内样式（即直接写在标签style属性中的样式），如果color样式是通过外部CSS文件、内部<style>标签定义的，直接读取style.color会默认返回空字符串。

场景1：仅读取行内定义的color样式 #

直接取值style.color即可，修正后代码如下：

// 先获取目标input元素
var inputEle = document.getElementsByTagName("input")[0];
// 读取行内color属性值存入变量
var textColor = inputEle.style.color;
console.log(textColor);

场景2：读取元素最终生效的color样式 #

如果需要获取无论哪种方式定义的、最终生效在元素上的color值，使用window.getComputedStyle方法：

var inputEle = document.getElementsByTagName("input")[0];
// 获取元素计算后的完整样式对象
var computedStyle = window.getComputedStyle(inputEle);
// 读取最终生效的color值，返回结果为rgb/rgba格式
var textColor = computedStyle.color;
console.log(textColor);

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