Javaスクリプトで入力プレースホルダのスタイルを変更

新しいクラスを追加してプレースホルダの色を変更しようとしました。これにより、colorプロパティが上書きされます。しかし、それは動作していないようです。次のコードはプレースホルダの色を緑から赤に変更することを意図していますが、緑からデフォルトの黒/灰色に変更されています。Javaスクリプトで入力プレースホルダのスタイルを変更

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <input class="class" id="id" type="" name="" placeholder="placeholder text"> 
</body> 
<style type="text/css"> 
    .class::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    color: green; 
    } 
    .class2::-moz-placeholder { 
    color: red !important; 
    } 
</style> 
<script type="text/javascript">document.getElementById("id").className+="class2";</script> 
</html>

ここで、間違いや代替方法はありますか？

出典

2016-07-07 chromosapiens

cssクラスをスペースで区切る必要があります。つまり、 '.className + = 'class2''です。どうしてクラスを交換するだけではないのですか？ 'class2'にない' class'には何もありません – Phil

* typo * – Phil

として閉じ込める投票本当に、忘れてしまいました。 – chromosapiens

document.getElementById("id").className += "class2";

は、"classclass2"になります。 CSSに対応するクラスclassclass2が存在しないため、この要素は無視されます。新しいクラス名の前にスペースを追加します。

document.getElementById("id").className += " class2";

以上の近代的なclassListアプローチを使用します。

document.getElementById("id").classList.add("class2");

出典

2016-07-07 01:14:25 Xufox

ES5準備ブラウザのために、このための素晴らしい近代的なソリューションは、選択からCLASSLIST方法を使用することですDOMノード。この方法でフラグメントをDOMにレンダリングするときに連結問題に遭遇することはありません。

document.getElementById("id").classList.add("class2")

出典

2016-07-07 01:14:26

Javaスクリプトで入力プレースホルダのスタイルを変更

答えて

関連する問題