Question

我目前有一个选择框，其中包含不同颜色的选项，以及div中可用作文本编辑器的内容。我想要的是从盒子中选择一种颜色，例如红色，满足的内容中选定的文本变为红色。

        <select id="colorChange">
            <option onchange="value="Black">Black</option>
            <option value="Red">Red</option>
            <option value="Blue">Blue</option>
            <option value="Green">Green</option>
            <option value="Yellow">Yellow</option>
            <option value="Pink">Pink</option>
        </select>

Answer 1

Onchange of options调用函数并使用jquery .css方法更改文本颜色。

function changeColor(){
 var _color = $("#colorChange option:selected" ).val().toLowerCase();
$("#abc").css('color',_color)
}

注意：<option onchange="value="Black">Black</option>

中存在拼写错误

JSFIDDLE

Answer 2

试试这个：）

$('#colorChange').on('change', function() {
  $color = this.value 
  $("select option:selected").css("color", $color);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="colorChange">
            <option onchange="value="Black">Black</option>
            <option value="Red">Red</option>
            <option value="Blue">Blue</option>
            <option value="Green">Green</option>
            <option value="Yellow">Yellow</option>
            <option value="Pink">Pink</option>
        </select>

Answer 3

以下是jQuery解决方案。

onchange需要在select。
将所选颜色应用于div。

$(function() {
  var color = 'black';

  $('select').change(function() {
    color = $(this).val();
    $('div').css('color', color);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="colorChange">
  <option value="Black">Black</option>
  <option value="Red">Red</option>
  <option value="Blue">Blue</option>
  <option value="Green">Green</option>
  <option value="Yellow">Yellow</option>
  <option value="Pink">Pink</option>
</select>
<br/>
<br/>
<div contenteditable="true">This text color will change based on selection</div>

Answer 4

在选择输入上侦听更改事件，获取其值，然后使用CSS更改容器的颜色。

    $('#colorChange').change(function(){
       var selectedColor = this.value;
       $('#container').css('color', selectedColor);
    });

此方法在使用颜色名称时将起作用所有浏览器都支持的颜色名称（http://www.w3schools.com/cssref/css_colors.asp）如果您需要自定义颜色，您需要将选择输入中的选项值设置为HEX（＃）值所需的颜色或通过switch语句传递selectedColour以确定颜色代码。

Answer 5

Javascript版本。我真的希望我不做你的功课。

document.getElementById('colorChange').addEventListener('change',function(event){
   var val = event.target.value; 
   var div = document.getElementById('editableDiv'); 
   div.style.color = val;
});

onchange改变文本颜色在contenteditable内

5 个答案: