类似word的颜色选择器支持IE和FF

/**
 * 简单的颜色选择器
 * @author ballanfeng
 */
//document.write("<OBJECT id="dlgHelper" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></OBJECT>"); active控件显示其他颜色
var ecolorPopup = null; //触发js的文本框对象
var colorDIV = null; //显示颜色选择器div对象
function colordialog(textid, divid) {
 ecolorPopup = document.getElementById(textid);
 colorDIV = document.getElementById(divid);
 colorDIV.style.backgroundColor = "#f9f8f7";
 colorDIV.style.border = "solid #999999 1px";
 colorDIV.style.fontSize = "12px";
 var colorlist = new Array(40); //颜色数组
 colorlist[0] = "#000000";
 colorlist[1] = "#993300";
 colorlist[2] = "#333300";
 colorlist[3] = "#003300";
 colorlist[4] = "#003366";
 colorlist[5] = "#000080";
 colorlist[6] = "#333399";
 colorlist[7] = "#333333";
 colorlist[8] = "#800000";
 colorlist[9] = "#FF6600";
 colorlist[10] = "#808000";
 colorlist[11] = "#008000";
 colorlist[12] = "#008080";
 colorlist[13] = "#0000FF";
 colorlist[14] = "#666699";
 colorlist[15] = "#808080";
 colorlist[16] = "#FF0000";
 colorlist[17] = "#FF9900";
 colorlist[18] = "#99CC00";
 colorlist[19] = "#339966";
 colorlist[20] = "#33CCCC";
 colorlist[21] = "#3366FF";
 colorlist[22] = "#800080";
 colorlist[23] = "#999999";
 colorlist[24] = "#FF00FF";
 colorlist[25] = "#FFCC00";
 colorlist[26] = "#FFFF00";
 colorlist[27] = "#00FF00";
 colorlist[28] = "#00FFFF";
 colorlist[29] = "#00CCFF";
 colorlist[30] = "#993366";
 colorlist[31] = "#CCCCCC";
 colorlist[32] = "#FF99CC";
 colorlist[33] = "#FFCC99";
 colorlist[34] = "#FFFF99";
 colorlist[35] = "#CCFFCC";
 colorlist[36] = "#CCFFFF";
 colorlist[37] = "#99CCFF";
 colorlist[38] = "#CC99FF";
 colorlist[39] = "#FFFFFF";
 var ocbody = "";
 ocbody += "<table CELLPADDING=0 CELLSPACING=3>";
 ocbody += "<tr height=\"20\" width=\"20\"><td align=\"center\"><table style=\"border:1px solid #808080;\" width=\"12\" height=\"12\" bgcolor=\"" + ecolorPopup.value + "\"><tr><td></td></tr></table></td><td bgcolor=\"eeeeee\" colspan=\"7\" style=\"font-size:12px;\" align=\"center\">\u5f53\u524d\u989c\u8272</td></tr>";
 for (var i = 0; i < colorlist.length; i++) {
  if (i % 8 == 0) {
   ocbody += "<tr>";
  }
  ocbody += "<td width=\"14\" height=\"16\" style=\"border:1px solid;\" onMouseOut=\"colordialogmouseout(this);\" onMouseOver=\"colordialogmouseover(this);\" onMouseDown=\"colordialogmousedown('" + colorlist[i] + "')\" align=\"center\" valign=\"middle\"><table style=\"border:1px solid #808080;\" width=\"12\" height=\"12\" bgcolor=\"" + colorlist[i] + "\"><tr><td></td></tr></table></td>";
  if (i % 8 == 7) {
   ocbody += "</tr>";
  }
  //ocbody += "<tr><td align="center" height="22" colspan="8" onMouseOut="parent.colordialogmouseout(this);" onMouseOver="parent.colordialogmouseover(this);" style="border:1px solid;font-size:12px;cursor:default;" onMouseDown="parent.colordialogmore()">其它颜色</td></tr>";
 }
 ocbody += "</table>";
 colorDIV.innerHTML = ocbody;
 colorDIV.style.left = (calculateOffset(ecolorPopup, "offsetLeft") + 1) + "px";
 colorDIV.style.top = (calculateOffset(ecolorPopup, "offsetTop") + ecolorPopup.offsetHeight) + "px";
 colorDIV.style.width = (ecolorPopup.offsetWidth + 2) + "px";
 colorDIV.style.height = 150 + "px";
 colorDIV.style.position = "absolute";
 colorDIV.style.display = "block";
}
function colordialogmouseout(obj) {
 obj.style.borderColor = "";
 obj.bgColor = "";
}
function colordialogmouseover(obj) {
 obj.style.borderColor = "#0A66EE";
 obj.bgColor = "#EEEEEE";
}
function colordialogmousedown(color) {
 ecolorPopup.value = color;
 ecolorPopup.style.background = color;
 colorDIV.style.display = "none";
}
/** 显示其他颜色方法
function colordialogmore() {
 var sColor = dlgHelper.ChooseColorDlg(ecolorPopup.value);
 sColor = sColor.toString(16);
 if (sColor.length < 6) {
  var sTempString = "000000".substring(0, 6 - sColor.length);
  sColor = sTempString.concat(sColor);
 }
 ecolorPopup.value = "#" + sColor.toUpperCase();
 ecolorPopup.style.backgroundColor = "#" + sColor.toUpperCase();
 ecolorPopup.style.display="none";
}
**/
   
//计算显示颜色div的显示位置
function calculateOffset(field, attr) {
 var offset = 0;
 while (field) {
  offset += field[attr];
  field = field.offsetParent;
 }
 return offset;
}
/**文本框失去焦点颜色选择器隐藏**/
function clearColorDIV(divid) {
 var divobj = document.getElementById(divid);
 if (divobj.style.display == "block") {
  divobj.style.display = "none";
 }
}

 

文中注释的部分是弹出其他颜色窗口，颜色数组里边的颜色用户可以自己修改为自己需要的颜色