web-dev-qa-db-ja.com

JavaScriptを使用してプレースホルダーの色を更新する方法は？

オンラインで検索していて、何も見つかりませんでした。 JavaScriptを使用してテキストボックスのプレースホルダーの色を更新しようとしていますが、どうすればできますか？カラーピッカーを使用していますが、色が変わります。

CSSにこのようなものがある場合、どうすれば更新できますか？

::placeholder {
  color: red;
}
<input placeholder="placeholder" />

これを編集するJavaScriptコマンドはありますか？何かのようなもの

document.getElementById('text').style.placeholderColor = newColor;
javascripthtmlcsspseudo-element
23
Manuel Rizzo

CSS変数を使用します。必要な要素のみをターゲットにすることもできます

function update() {
  document.querySelector('input[type=text]').style.setProperty("--c", "blue");
}
::placeholder {
  color: var(--c, red);
}
<input type="text" placeholder="I will be blue">
<input type="number" placeholder="I will remain red">
<button onclick="update()">change</button>

CSS変数は、JSでアクセスできない:before/:after/::placeholer/::selectionなどの疑似クラス/疑似要素を変更する場合に役立ちます。プロパティを定義するには、要素で簡単に更新できる変数。

関連： jQueryを使用する:: beforeや:: afterなどのCSS疑似要素の選択と操作

33
Temani Afif

他の回答で述べられているように、 インラインで疑似要素のスタイルを変更する はできません。ただし、<style>自体でCSSルールを変更することができ、そのためにブラウザーがCSS変数をサポートする必要はありません。 stylesheet にアクセスして、既存の rule を取得するか、独自に挿入してから、要素.styleの場合と同じように、その style宣言 を使用します。

const {sheet} = Object.assign(document.head.appendChild(document.createElement("style")), {type: "text/css" });
const placeholderStyle = sheet.rules[sheet.insertRule("::placeholder {}")].style;
placeholderStyle.color = "red";

Object.assign(document.body.appendChild(document.createElement("input")), {
  type: "button", value: "Color!", onclick() {
    placeholderStyle.color = "#"+Math.round(Math.random()*0xFFF).toString(16).padStart("0",3);
}});
<input placeholder="placeholder" />
4
Bergi