从选择选项更改字体颜色

Posted 2023-05-08

【中文标题】从选择选项更改字体颜色

【英文标题】：Change font color from select option

【发布时间】：2012-06-22 02:51:31

【问题描述】：

我正在编写一些代码，基本上我有一个表格。在该表单上是一个选择选项，我希望用户在其中选择字体颜色。 然后，我需要将该选项附加到页面上的元素，方法是添加他们选择作为 css 类的选项。需要现场直播。

所以像这样形成元素：

<select id="selectcolor" name="selectcolor" style="width: 200px;">
                        <option value="null">-- Select a Color ... --</option>
                        <option value="black">Black</option>
                        <option value="white">White</option>
                </select>

我做的JS是：

//select text color
    $("#selectcolor").change(function()
    var color = $(this).val();
    $(".selectcolor").css("color", 'color');

要应用更改的 html：

<div class="rightBottom selectcolor">Change this text<br />color</div>

然后我打算在 css 中做：

.black color:#000;
.white color:#fff;

等等

基本上，当用户更改选择选项时，假设为黑色，class 属性将 div / span 元素上的文本颜色更改为黑色。等等

请有任何建议，我尝试添加选择选项值 color:#000 等但没有奏效，我猜我忽略了几个问题...

提前谢谢你

【参考方案1】：

$('#selectcolor').change(function() 
    var color = this.value || '';
    $('.selectcolor').attr('class', function(i, classes) 
        var cls = classes.split(/[\s]/);
        cls[2] = color;
        return cls.join(' ');
    );
);

DEMO

【讨论】：

唯一的问题是，在 html 中它正在做：style="color: pink;"对于粉红色，在我的情况下，它不反映粉红色的 .css 类 .pink: #ec008c;有没有办法让它解析#value而不是颜色名称值？

移除了勾号，因为这添加了样式属性但没有实例化类，这是我们想要的。

如果你可以在 jsfiddle 上迭代它，不幸的是我不能让它像 reqd 一样工作。

谢谢您，将立即检查。并修改接受的答案。干杯

【参考方案2】：

我认为这是因为您使用的是常量“颜色”而不是使用可变颜色。 换行：

 $(".selectcolor").css("color", 'color');

到：

$(".selectcolor").css("color", color)

【参考方案3】：

我认为你需要改变

$(".selectcolor").css("color", 'color');

到

$(".selectcolor").css("color", color);

【参考方案4】：

据我了解，您希望元素根据选定的选项值获得正确的类名；

所以，下面是我想到的解决方案：

<select id="selectcolor" name="selectcolor" style="width: 200px;">
     <option value="null">-- Select a Color ... --</option>
     <option value="000000">Black</option>
     <option value="ffffff">White</option>
</select>

$("#selectcolor").change(function()
    var color = $(this).val();
    $(".selectcolor").css('color', '#'+ color);

希望对您有所帮助。我没有测试代码，但其背后的想法是您将选项值设置为不带 # 符号的颜色代码，因此在第三行查询中会将 # 粘贴到字符串中。在 jQuery 中使用变量时要小心，不要用 \' 包围它，因为它会将其解释为静态文本。