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

Question

我想讓我們的JavaScript在事件觸發時更改contenteditable div的占位符顏色。 但是這個大個子的Javascript / Jquery選擇器是什么？

我試過了：

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

演示

<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

您可以使用JQuery按照以下方式進行操作。 使用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>