无法修改input元素的placeholder颜色，求正确实现方法

你尝试的elem.placeholder.style.color无效，核心原因是：elem.placeholder返回的只是占位符的文本字符串，并非可操作样式的DOM元素，所以根本不存在style属性。

Placeholder的样式是通过CSS伪元素来控制的，以下是两种可行方案：

方案一：静态CSS（推荐） #

直接通过CSS伪元素定义样式，兼容主流浏览器：

/* 标准写法 */
#myInput::placeholder {
  color: green;
}

/* 适配旧版浏览器的前缀写法 */
#myInput::-webkit-input-placeholder {
  color: green;
}
#myInput:-moz-placeholder {
  color: green;
  opacity: 1; /* Firefox默认会降低占位符透明度，需手动重置 */
}
#myInput::-moz-placeholder {
  color: green;
  opacity: 1;
}
#myInput:-ms-input-placeholder {
  color: green;
}

把这段CSS放在HTML的<head>标签内即可生效。

方案二：JS动态修改 #

如果需要通过JS动态调整颜色，不能直接操作placeholder，而是通过添加CSS类或动态插入样式规则实现：

方法1：添加/切换CSS类 #

先在CSS中定义样式类：

.placeholder-green::placeholder {
  color: green;
}
.placeholder-green::-webkit-input-placeholder {
  color: green;
}
.placeholder-green:-moz-placeholder {
  color: green;
  opacity: 1;
}
.placeholder-green::-moz-placeholder {
  color: green;
  opacity: 1;
}
.placeholder-green:-ms-input-placeholder {
  color: green;
}

再用JS操作元素的类名：

const elem = document.getElementById("myInput");
// 添加类
elem.classList.add("placeholder-green");
// 切换类（适合在两种样式间切换）
// elem.classList.toggle("placeholder-green");
// 移除类
// elem.classList.remove("placeholder-green");

方法2：动态插入样式规则 #

适合需要生成随机颜色或动态指定颜色值的场景：

const elem = document.getElementById("myInput");
const targetColor = "green"; // 可替换为动态生成的颜色值
const style = document.createElement('style');
style.textContent = `
  #${elem.id}::placeholder {
    color: ${targetColor};
  }
  #${elem.id}::-webkit-input-placeholder {
    color: ${targetColor};
  }
  #${elem.id}:-moz-placeholder {
    color: ${targetColor};
    opacity: 1;
  }
  #${elem.id}::-moz-placeholder {
    color: ${targetColor};
    opacity: 1;
  }
  #${elem.id}:-ms-input-placeholder {
    color: ${targetColor};
  }
`;
document.head.appendChild(style);

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