Question

我正在尝试根据用户选择主动更改背景颜色和文本颜色，并且似乎无法获得它，这是我到目前为止使用jquery颜色选择器正常工作。我是一个新手，所以请评论代码

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head>
<title>Color Picker</title>
  <meta charset="utf-8">
    <link id="jquiCSS" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-lightness/jquery-ui.css" type="text/css" media="all">
    <link href="http://nitrouscms.com/css/demo.css" rel="stylesheet" /> 
    <link href="http://nitrouscms.com/css/evol.colorpicker.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" type="text/javascript"></script>
    <script src="http://nitrouscms.com/js/evol.colorpicker.min.js" type="text/javascript"></script>
</head>

<body bgcolor="#E6E6FA">   

<form action="Test.pl" name="FormSubmit">

<div class="demoPanel" style="width:130px">
Font Color<input id="FontColor" Name="FontColor" value="#31859b" />
</div>

<div class="demoPanel" style="width:130px">
BG Color<input id="BackgroundColor" Name="BackgroundColor" value="#31859b" />
</div>

<div style="clear:both;"></div>

<br />

<input type="button" value="Save">

</form>

<p>This is my test text that I would like to change color.</p>

<script>
$(document).ready(function(){

    // Instanciate colorpickers
    $('#FontColor').colorpicker();
    $('#BackgroundColor').colorpicker();

    $('#show').on('click', function(evt){
        evt.stopImmediatePropagation();

  });   

});

</script>

</body>
</html>

Answer 1

使用color.change事件从colorpicker中获取值，并使用.css jQuery函数将其设置为更新。这在您使用的颜色选择器的github文档中有概述，我建议您阅读它ColorPicker Github Documentation

示例代码：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Color Picker</title>
  <meta charset="utf-8">
  <link id="jquiCSS" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-lightness/jquery-ui.css" type="text/css" media="all">
  <link href="http://nitrouscms.com/css/demo.css" rel="stylesheet" />
  <link href="http://nitrouscms.com/css/evol.colorpicker.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" type="text/javascript"></script>
  <script src="http://nitrouscms.com/js/evol.colorpicker.min.js" type="text/javascript"></script>
</head>

<body bgcolor="#E6E6FA">

  <form action="Test.pl" name="FormSubmit">

    <div class="demoPanel" style="width:130px">
      Font Color
      <input id="FontColor" Name="FontColor" value="#31859b" />
    </div>

    <div class="demoPanel" style="width:130px">
      BG Color
      <input id="BackgroundColor" Name="BackgroundColor" value="#31859b" />
    </div>

    <div style="clear:both;"></div>

    <br />

    <input type="button" value="Save" id="save-button">

  </form>

  <p>This is my test text that I would like to change color.</p>
  <script>
    $(document).ready(function() {

      // Instanciate colorpickers
      $('#FontColor').colorpicker().on("change.color", function(event, color) {
        $('body').css('color', color);
      });
      $('#BackgroundColor').colorpicker().on("change.color", function(event, color) {
        $('body').css('background-color', color);
      });;

    });
  </script>

主动更改背景颜色和文本颜色

1 个答案: