Question

我已经下载了最新版本的jscolor.js（2.05），但是在使用它时遇到了一些问题。在CSS中，我一直试图停止在按钮上显示颜色的值。我尝试使用'valueElement：null;'但我收到valueElement的“未知属性”错误。从那以后，我发现'borderWidth'，'backgroundColor'和'insetColor'都抛出相同的错误。

由于无法识别valueElement，因此无法禁用按钮上的颜色值。

我怀疑这也导致选择器在网页中打开时发生偏移。矩形中间的彩虹似乎在整个选取器中偏移了。这是问题图片的链接：（https://ibb.co/9N8dHXs）

如何禁用按钮上的颜色值，是什么导致所有这些属性都无法识别？

  .jscolor {
            border: white;
            width: 50px;
            position:'right';

            valueElement: null; /*throws 'Unknown Property' error*/
            shadow: false;
            borderWidth:0;   /*throws 'Unknown Property' error*/
            backgroundColor:'transparent'; /*throws 'Unknown Property' error*/
            insetColor:'#000'; /*throws 'Unknown Property' error*/
            padding: 0;
        }

<div class="sidebar" id="sidebar">
            <div>
                <h4 class="sect-head">BACKGROUND</h4>
                <div class="sect-child">
                    Sky Color
                    <input class="jscolor" onchange="setRendererColor(this.jscolor)" value="FFE4A6">
                </div>

Answer 1

如果您仔细查看其示例页面，请访问http://jscolor.com/examples/并搜索“链接到不同元素”示例，您将找到所需的确切信息。

据我所知，按钮的代码与您的按钮代码之间存在3个差异。我怀疑第一个无关紧要。

他们使用了button，而您使用了input type='button'
在class属性中，它们还提供了看起来像json的内容-您仅提供了jscolor类
您已为元素指定了一个值-该值已打印并用作背景颜色
您正在使用事件处理程序来更新按钮的颜色。
当用户按下它时，它会被赋予jscolor类jscolor-active 而不是-因此，您的CSS不再适用。相反，您可能希望除了jscolor之外，还向按钮添加另一个类。这样，JavaScript仍可以识别和操作元素，并且您添加的类将保持不变，因此，您的CSS将继续适用。

这是您的代码：

<input class="jscolor" onchange="setRendererColor(this.jscolor)" value="FFE4A6">

这是他们的：

<button class="jscolor
    {valueElement:'valueInput', styleElement:'styleInput'}">
    Click here to pick a color
</button>

Answer 2

这是一个简单的代码，向您展示如何正确使用input：

generated_button = document.querySelector("#generated-button");
function update_font_color(jscolor) {
    // 'jscolor' instance can be used as a string
    generated_button.style.color = '#' + jscolor
}

 <body>
 <div id="generated-button-div">
       <input id="generated-button" type="button" value="Default Label">
 </div>
 <div class="input-wrapper">
       <label for="font-color">Font Color:</label>
       <input name="font-color" id="font-color" class="jscolor {onFineChange:'update_font_color(this)'}" value="000000">
 </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
 </body>

为什么我的jscolor颜色选择器无法正常工作？

2 个答案: