一个颜色选择器可用于多种颜色(背景、前景和文本)

Question

我有一个可以正常工作的颜色选择器。

HTML：

<input id="cyan" class="colorPicker" style="vertical-align: middle;" class="grabbable" type="range" min="0" max="255" step="1" value="255">  
<input id="magenta" class="colorPicker" style="vertical-align: middle;" class="grabbable" type="range" min="0" max="255" step="1" value="255">  
<input id="yellow" class="colorPicker" style="vertical-align: middle;" class="grabbable" type="range" min="0" max="255" step="1" value="255">  

JavaScript：

var colorPicker = document.getElementsByClassName( "colorPicker" );
for( var i = 0; i < colorPicker.length; i++ )
{
  colorPicker[i].addEventListener( "input", function(){
    var cyan = document.getElementById( "cyan" ).value,
        magenta = document.getElementById( "magenta" ).value,
        yellow = document.getElementById( "yellow" ).value;

    document.body.style.backgroundColor = "rgb(" + cyan + ", " + magenta + ", " + yellow + ")";
    localStorage.setItem( "cyan", cyan );
    localStorage.setItem( "magenta", magenta );
    localStorage.setItem( "yellow", yellow );
  });
}

我希望能够使用屏幕上相同的一个颜色选择器，但有一个单选按钮或下拉选择其他颜色值来更改。

希望这一点是清楚的。我是JavaScript的新手，我知道它非常强大和灵活。我只是不知道如何实现这一点。

谢谢。

Answer 1

你是说像这样的东西？我已经添加了HTML选择元素和附加的事件到它。

​

var colorPicker = document.getElementsByClassName( "colorPicker" );
for( var i = 0; i < colorPicker.length; i++ )
{
  colorPicker[i].addEventListener( "input", function(){
    var cyan = document.getElementById( "cyan" ).value,
        magenta = document.getElementById( "magenta" ).value,
        yellow = document.getElementById( "yellow" ).value;

    document.body.style.backgroundColor = "rgb(" + cyan + ", " + magenta + ", " + yellow + ")";
    localStorage.setItem( "cyan", cyan );
    localStorage.setItem( "magenta", magenta );
    localStorage.setItem( "yellow", yellow );
  });
}

var colorPickerSelect = document.getElementById("colorPickerSelect");
colorPickerSelect.addEventListener('change', function() {
	document.body.style.backgroundColor = colorPickerSelect.value;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="cyan" class="colorPicker" style="vertical-align: middle;" class="grabbable" type="range" min="0" max="255" step="1" value="255">  
<input id="magenta" class="colorPicker" style="vertical-align: middle;" class="grabbable" type="range" min="0" max="255" step="1" value="255">  
<input id="yellow" class="colorPicker" style="vertical-align: middle;" class="grabbable" type="range" min="0" max="255" step="1" value="255">  
<br/>
<select id="colorPickerSelect">
  <option>red</option>
  <option>green</option>
  <option>blue</option>
</select>

​

Answer 2

维平

非常感谢你的帖子。你让我思考然后我想通了。下面的解决方案运行良好。只需要再做几个小调整，就可以获得所需的确切行为。

HTML：

<input id="cyan" class="colorPicker" style="vertical-align: middle;" class="grabbable" type="range" min="0" max="255" step="1" value="255">
<input id="magenta" class="colorPicker" style="vertical-align: middle;" class="grabbable" type="range" min="0" max="255" step="1" value="255">
<input id="yellow" class="colorPicker" style="vertical-align: middle;" class="grabbable" type="range" min="0" max="255" step="1" value="255">

<select id="colorPickerSelect" style="cursor: pointer;" onchange="colorPickerSelect( this.value );">
  <option value=""></option>
  <option value="background">Background</option>
  <option value="titleBackground">Title BG</option>
  <option value="titleText">Title Text</option>
  <option value="border">Border</option>
</select>

JavaScript：

function assignColorPicker( )
{
  var type = document.getElementById( "colorPickerSelect" ).value;
  var cyan = document.getElementById( "cyan" ).value,
      magenta = document.getElementById( "magenta" ).value,
      yellow = document.getElementById( "yellow" ).value;
  if( type == 'background' )
  {
    document.body.style.backgroundColor = "rgb(" + cyan + ", " + magenta + ", " + yellow + ")";
  }
  else if( type == 'titleBackground' )
  {
    document.styleSheets[3].cssRules[1].style.backgroundColor = "rgb(" + cyan + ", " + magenta + ", " + yellow + ")";
  }
    else if( type == 'titleText' )
  {
    document.styleSheets[3].cssRules[4].style.color = "rgb(" + cyan + ", " + magenta + ", " + yellow + ")";
  }
  else if( type == 'border' )
  {
    document.styleSheets[3].cssRules[0].style.border = '1px solid ' + "rgb(" + cyan + ", " + magenta + ", " + yellow + ")";
    document.styleSheets[3].cssRules[2].style.color = "rgb(" + cyan + ", " + magenta + ", " + yellow + ")";
  }
}

function colorPickerSelect( )
{
  var colorPicker = document.getElementsByClassName( "colorPicker" );
  for( var i = 0; i < colorPicker.length; i++ )
  {
    colorPicker[i].removeEventListener( "input", assignColorPicker );
    colorPicker[i].addEventListener( "input", assignColorPicker );
  }
}