javascript - Javascript:如何更改ContentEditable div占位符颜色

我想让我们的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>

最佳答案

您可以使用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>