使用 ColorPicker 将字体颜色设置为 div答案

【问题标题】：Set font color to divs with ColorPicker使用 ColorPicker 将字体颜色设置为 div
【发布时间】：2015-08-13 14:49:51
【问题描述】：

所以，我用这个 jscolor 来选择我的颜色：http://jscolor.com/ 对于 php 目的来说工作得很好，但我希望我的带有“color-font”类的 div 能够响应我选择的任何颜色。意思是，我希望具有“颜色字体”类的 div 在我从该调色板中选择颜色时更改其字体颜色。

我正在使用 ColorPicker 让 div 更改其字体，但它不起作用。颜色选择器链接：http://www.eyecon.ro/colorpicker/

这是我所拥有的代码：

这是输入调色板：

<input type="text" size="1" name="color_font" id="color_font" value="<?php echo $t_content["color_font"]["content"]; ?>" style="font-size: 0px;  background-color: <?php echo $t_content["color_font"]["content"]; ?>; color: <?php echo $t_content["color_font"]["content"]; ?>;" class="color {hash:true}" />

这是 javascript 代码，我试图从 ID = "color_font" 的输入中选择颜色，并将其设置在 div 中，设置为 class= "color-font"

$('#color_font').ColorPicker({
    //color: $(this).val(),

    onBeforeShow: function() {
        $('#color_font').ColorPickerSetColor($('#color_font').val());
    },
    onChange: function(hsb, hex, rgb) {
        var element_p = $('#color_font');
        var old_color_accent = $('#color_font').css('color');

        $('.color-font').each(function() { $(this).css('color', '#' + hex); });


        element_p.css('background-color', '#' + hex);
        element_p.css('color', '#' + hex);
        element_p.val('#' + hex);
    },
    onSubmit: function(hsb, hex, rgb, el) {
        $('#color_font').ColorPickerHide();
    }
});

我不明白为什么它不起作用。

【问题讨论】：

你能用 CodePen 或 JSFiddle 创建一个小演示吗？

标签： javascript jquery color-picker jscolor

【解决方案1】：

您可以在数据库中注册所选颜色，在您的系统中查找所选颜色的结果，并将该结果显示在 php 格式的样式表中。您无法在另一个文件中获取样式表，您可以拥有一个带有样式表的 php 文件并将此文件包含在您的页面中。您需要使用样式表创建一个 php 文件，该样式表应该是具有您选择的颜色的 div 的类。

例如 your_page.php ：

       <style type="text/css">
        .my_color{
            color: <?php echo $mycolor; ?>;
            background: <?php echo $mybackground; ?>;
        }
        </style>


<div class="my_color">
This is my color!
</div>

【讨论】：