如何以javascript格式更改占位符的颜色？答案

【问题标题】：How to change color of placeholder in javascript format?如何以javascript格式更改占位符的颜色？
【发布时间】：2017-09-08 11:09:48
【问题描述】：

如何将占位符的颜色更改为白色？我知道我必须使用 -moz-placeholder 但我不知道如何将其格式化为 JAVASCRIPT。我需要以javascript格式匹配我下面的代码。

           //User Name Input
            var inputUserName = document.createElement("input");
            inputUserName.type = "text";
            inputUserName.style.bottom = "220px";
            inputUserName.style.width = "170px";
            inputUserName.style.height = "20px";
            inputUserName.style.left = "50px";
            inputUserName.style.textAlign = "center";
            inputUserName.style.display = "none";
            inputUserName.style.backgroundColor = "transparent";
            inputUserName.style.borderBottom = "2px solid black";
            inputUserName.style.borderTop = "transparent";
            inputUserName.style.borderLeft = "transparent";
            inputUserName.style.borderRight = "transparent";
            inputUserName.placeholder = "User Name";
            inputUserName.style.color = "white";
            inputUserName.style.position = "absolute";
            inputUserName.className = "UserNameSignUp";
            inputUserName.UserNameSignUp = "-moz-placeholder";
        //input.className = "css-class-name"; // set the CSS class
        formArea.appendChild(inputUserName); // put it into the DOM

【问题讨论】：

标签： javascript placeholder

【解决方案1】：

-moz-placeholder 是一个伪类，因此不直接属于 DOM，因此您不能以相同的方式对其进行编辑或添加内联样式。

一种解决方法是动态更改样式表

document.styleSheets[0].insertRule('#xyz:-moz-placeholder { background-color: white; }', 0);

考虑到它有一些 id("#xyz")。

请参阅此文档以供参考： https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule

【讨论】：