html - 为什么我的 jscolor 颜色选择器不能正常工作？

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 处不同。我怀疑第一个无关紧要。

1. 他们使用了一个按钮，而你使用了一个input type='button'
2. 在 class 属性中，它们还提供了看似 json 的内容——您只提供了 jscolor 类
3. 您已经为该元素赋予了一个值——它既被打印出来又被用作背景颜色
4. 您正在使用事件处理程序来更新按钮的颜色。
5. 当用户按下它时，它被赋予 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>