JavaScript颜色选择器使用CSS语法I'I’我不熟悉

JavaScript color picker uses CSS syntax I'm not familiar with?

本文关键字：不熟悉 语法 选择器 颜色 CSS JavaScript      更新时间：2023-09-26

我使用的是jscolor，它是一个javascript颜色选择器插件（链接）。

文档在css类中使用javascript。

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

如何在javascript中实现这一点？我以前从未见过这种情况。

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

<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">

这段代码是如何通过只包含类jscolor来调用插件的？

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

特别是jscolor.show()对我来说没有意义。jscolor从哪里来。

我尝试在jQuery中复制该代码，但没有成功！

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

他们对类定义做了一些非常非典型的事情，所以语法看起来晦涩也就不足为奇了。但事实并非如此。实际上只有三个CSS类的名字很奇怪：

  1. jscolor
  2. {padding:20
  3. borderWidth:3｝

在他们的js文件中，他们使用正则表达式从中解析出CSS值，然后以编程方式应用它们（从逻辑上讲，如果一个元素有一个jscolor类，那么找到一个以{开头、以}结尾的字符串，去掉括号和逗号，并使用空格作为分隔符，就可以应用CSS属性列表）。据推测，他们不想在下载时附带一个单独的CSS文件。

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

jscolor : function (targetElement, options) {

其中定义了大量函数调用。其中，1046行：

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

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

如果你在继续使用它们的过程中自己研究一下它们的代码，你就会开始更清楚地看到它们在做什么。jscolor类是如何编写JS类的一个很好的例子。然而，类属性的东西肯定是不寻常的。

当jscolor加载src标记时，它用一个自执行函数调用自己，该函数在初始化时查找DOM中具有类jscolor的所有input和button标记，然后向它们添加一个名为jscolor的属性。jscolor对象就是您在执行onclick="document.getElementById('foo').jscolor.show()" 时调用的对象

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

所有这些信息都可以从jscolor github页面找到：https://github.com/EastDesire/jscolor/blob/2.0.4/jscolor.js

相关文章：