我总是得到一个空颜色对象。我已经有大约一年没接触过 Dojo 了，所以一切都很生疏。 colorPallette 显示，但是当我单击它时，下面的变量 objColor 始终为 null。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojox.widget.ColorPicker");
dojo.require("dijit.ColorPalette");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Textarea");
output = "Color=&Color,SoundFile=&SoundFile";
function updateResults()
{
var objColorPalette = dijit.byId("colorPalette");
var objColor = objColorPalette.value;
//var objColor = objColorPalette.attr("value");
//alert("objColor=" + objColor);
if (objColor == null)
{
output = output.replace("&Color","null");
}
else
{
output = output.replace("&Color",objColor.toHex());
}
var objResultTextArea = dijit.byId("results");
objResultTextArea.set("value", output);
}
function setColor(val)
{
output = output.replace("&Color",val.toHex());
var objResultTextArea = dijit.byId("results");
objResultTextArea.set("value", output);
}
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/widget/ColorPicker/ColorPicker.css"
/>
</head>
<body class=" claro ">
<h3>Begin Data Entry</h3>
<label for="mp3FileName">
Auto-trimming, Proper-casing Textbox:
</label>
<input type="text" name="mp3FileName" value="/yourRelativeFileName.mp3" dojoType="dijit.form.TextBox"
trim="true" id="firstname" propercase="true">
<h3>Color</h3>
<div dojoType="dijit.ColorPalette" onChange="updateResults()" palette="7x10" id="colorPalette">
</div>
<!--
<h3>Color Picker</h3>
<div dojoType="dojox.widget.ColorPicker" id="colorPicker">
</div>
-->
<h3>Results</h3>
<textarea id="results" name="results" dojoType="dijit.form.Textarea"
style="width:900px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</textarea>
<h3>The End</h3>
</body>
</html>
最佳答案
首先，一种快速完成您想要的方法:将小部件的 onChange 属性更改为简单的 updateResults(不带括号)。这意味着它被视为函数指针，并且将使用 ColorPalette 决定提供的任何参数调用该函数。
<div dojoType="dijit.ColorPalette" onChange="updateResults"
palette="7x10" id="colorPalette"></div>
其次，更改您的 updateResults 函数，使其接受一个参数。 ColorPalette 将为其 onChange 事件提供一个字符串参数，其中包含所选颜色的十六进制值。
function updateResults(selectedColor)
{
// Now you can remove a lot of the stuff that you had here, and simply do:
var objResultTextArea = dijit.byId("results");
objResultTextArea.set("value", output.replace("&Color", selectedColor));
}
既然那已经不可行了，为什么您原来的方法不起作用？实际上，确实如此。第二次选择颜色时，它会进入 else 子句，但它会在 toHex 上失败，因为 objColor 是一个字符串而不是 Color 对象。
但为什么它在第一次点击时不起作用？原因似乎是 onChange 函数在 ColorPalette 实际设置其内部“值”之前执行。我猜某处涉及 setTimeout。所以 objColorPalette.value 在那一点上将为 null(顺便说一句，使用 attr，或者说 get 是正确的方法 ;))。第二次事件触发时，该值实际上是之前选择的颜色，而不是新颜色(但 toHex 当然仍然会失败，因此结果字段中的文本将保持原样)。
希望这对您有所帮助。
关于javascript - 如何将 Dojo/Dijit ColorPalette 的值获取到字符串，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6524000/