如何以javascript格式更改占位符的顏色？

Question

如何將占位符的顏色更改為白色？ 我知道我必須使用-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

Answer 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