Question

我使用jscolor这是一个javascript颜色选择器插件（link）。

该文档在css类中使用了javascript。

＆＃13;

<input class="jscolor {padding:20, borderWidth:3}">

＆＃13;

我怎样才能在javascript中实现这一目标？我以前没见过。

我的另一个问题是来自jscolor文档的以下代码。它用于显示和隐藏插件。

＆＃13;

<script src="jscolor.js"></script>

<button onclick="document.getElementById('foo').jscolor.show()">
    Show Picker</button>

<button onclick="document.getElementById('foo').jscolor.hide()">
    Hide Picker</button>

<p><input id="foo" class="jscolor" value="cc4499">

＆＃13;

此代码如何仅仅包含类jscolor来调用插件？

以及document.getElementById('foo').jscolor.show()如何调用插件？

特别是jscolor.show()对我没有意义。 jscolor来自何处。

我尝试在jQuery中复制该代码并且它不起作用！

＆＃13;

$(document).ready(function(){
	$(button).click(function(){
		$('#foo').jscolor.show();
	});
});

＆＃13;

Answer 1

他们正在使用类定义做一些非常不典型的事情，因此语法似乎模糊不清并不奇怪。但它看起来并不像它。实际上只有三个具有奇怪名称的CSS类：

jscolor
{padding：20，
边框宽度：3}

在他们的js文件中，他们使用正则表达式从这些中解析出CSS值，然后以编程方式应用它们（逻辑上，如果元素有一个jscolor类，那么找到一个以{开头并结束的字符串使用}，删除括号和逗号并使用空格作为分隔符，并且要应用CSS属性列表。据推测，他们并不想通过下载发送单独的CSS文件。

至于你的第二个问题，他们只是将jscolor定义为一个类，具有自己的方法和属性。他们的代码，第977行：

jscolor : function (targetElement, options) {

在这一个中定义了很多函数调用。其中，在第1046行：

this.show = function () {
    drawPicker();
};

此代码定义了一个名为show()的函数;实际上是jscolor.show()。因此，show()调用drawPicker()函数，该函数实际上处理了选择器的显示。这意味着他们的show()方法与您熟悉的show()方法完全无关。他们已经定义了自己的。

如果你在继续使用它们时自己研究一下它们的代码，你就会开始更清楚地看到它们的用途。 jscolor类是如何编写JS类的一个很好的例子。但是，类属性的东西绝对是不寻常的。

Answer 2

当使用src标记加载jscolor时，它会使用自执行函数调用自身，该函数在启动时查找DOM中具有类input的所有button和jscolor标记然后向它们添加一个名为jscolor的属性。当您执行jscolor

时，onclick="document.getElementById('foo').jscolor.show()"对象就是您所呼唤的对象

将jscolor对象添加到input和button标记的相同逻辑也会查看其余的类数据并解析{padding:20, borderWidth:3}之类的内容。这就是JavaScript-esque代码在CSS类中的工作方式。

所有这些信息都来自jscolor github页面：https://github.com/EastDesire/jscolor/blob/2.0.4/jscolor.js

JavaScript颜色选择器使用我不熟悉的CSS语法？

2 个答案: