Javascript：如何更改ContentEditable div占位符颜色

Question

I want to us javascript to change the placeholder color of the contenteditable div when an event triggered. But what is Javascript/Jquery selector for this big guy?

I tried:

$("#topic_content_input[data-placeholder]:not([data-div-placeholder-content]):before").css({"color":"blue"}); 

Demo

<div id="topic_content_input" contenteditable="true" data-placeholder="I want to change my color on click " ></div>

<style>
    #topic_content_input[data-placeholder]:not([data-div-placeholder-content]):before {
        content: attr(data-placeholder);
        float: left;
        margin-left: 2px;
        color: rgba(134,134,134,0.6);
    }
</style>

Answer 1

You can do like following way using JQuery. Use addClass .

 jQuery(function($){ $("#topic_content_input").click(function(){ $(this).addClass('placeholder'); }); }); 

 .topic_content_input[data-placeholder]:not([data-div-placeholder-content]):before { content: attr(data-placeholder); float: left; margin-left: 2px; color: rgba(134,134,134,0.6); } .placeholder[data-placeholder]:not([data-div-placeholder-content]):before { color: rgba(0,0,255,1); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="topic_content_input" class="topic_content_input" contenteditable="true" data-placeholder="I want to change my color on click " ></div>