液晶显示器对disabled的控件颜色显示过浅的研究
KeyWord：液晶显示器 颜色过浅,液晶显示器 看不清,液晶显示器 disabled控件,disabled控件颜色太浅,disabled控件颜色太淡,disabled控件看不清,disabled控件颜色过浅,disabled控件颜色过淡,液晶显示器和CRT显示器区别,控件颜色,appendChild,appendChild用法,appendChild的使用
1:问题现象
因为我用的是CRT显示器,因为CRT的颜色要必液晶显示器颜色要亮丽一些,所以导致我在CRT显示器上调整的样式表颜色,在液晶显示器下颜色普遍偏淡,这个的确是一点很值得注意的地方,毕竟现在液晶显示器已经占据了主流,以后可能对此要注意一些.如果仅仅是样式表的颜色设计问题倒也就算了,那只是我个人的问题.但是当所有的disabled控件在液晶显示器的WindowXP下显示都出现"几乎看不清"的时候,这个问题就稍微有点严重了.这是这种"几乎看不清",迫使我们不的不更深入的研究一下这个问题的解决方案.贴图一个,如果你是液晶显示器看看效果是不是糟糕到"几乎看不清".
截的图片稍微有点失真.呵呵.
2:问题分析:
这个没有什么好分析的,就是因为液晶显示器的显示不够亮丽的原因造成的.但是,我们并不能说顾客的显示器是液晶的,就不让顾客访问页面呀,所以这个问题还是需要解决的.
3:问题的技术调查:
这个问题早先一段时间测试部就已经提出来了,当时的结论是:disabled后的控件颜色是浏览器内置的,不能够被修改,这个问题很难解决.因为当时这个bug的等级还不是很高,就没有及时解决.后来顾客反馈了这个问题,我们就必须进一步的调查一下了.
4:解决方案
既然disabled后的控件颜色我们是不能修改的,那我们只能另想办法了.当时在分析代码的时候发现radioBox的代码有点特殊,所以我们采用一些技巧.让我们先来看看这段生产后稍微整理了一下的代码.
<span disabled="disabled">
<input id="ctl00_cphMain_radLicenceSpecialSendFlg_0" type="radio" name="ctl00$cphMain$radLicenceSpecialSendFlg" value="1" checked="checked" disabled="disabled" tabindex="-1" />
<label for="ctl00_cphMain_radLicenceSpecialSendFlg_0">該当</label>
</span>
<span disabled="disabled">
<input id="ctl00_cphMain_radLicenceSpecialSendFlg_1" type="radio" name="ctl00$cphMain$radLicenceSpecialSendFlg" value="0" disabled="disabled" tabindex="-1" />
<label for="ctl00_cphMain_radLicenceSpecialSendFlg_1">否</label>
</span>
看到了吧,其实一个服务器端的"灰掉"的radio控件,打到前他后是有三个部分组成的,一个input type是radio类型,一个label,用来显示radio的文本,还有一个sapn,其实真是这个span让label"灰掉"了.所以我们只要让这个span的disabled的属性改变一下就可以啦.问题是我们怎么找到这个东西呢?如果直接遍历所有disabled=true的span,可以会导致其他的一些问题(例如页面就有一个我们设置的span,它的disabled就是我们设置的true,但我们并不想动它.),所以我们采用遍历所有input,条件是type=radio,然后disabled=true,通过这两个条件,我们基本就能确实是我们要出力的对象了,然后通过这个input的fatherElement,我们就能确实我们要操作的span了,然后讲它的disabled的属性设为flase.实现函数如下:
function DeeperColorForRadio(){
var InputTotal=document.all.tags("INPUT").length;
for(i=0;i<InputTotal;i++){
if(document.all.tags("INPUT")[i].type == "radio" && document.all.tags("INPUT")[i].disabled==true){
document.all.tags("INPUT")[i].parentElement.disabled=false;
}
}
}
通过观察代码,我们很容易的解决了radio的问题,剩下的列表框就稍微有点麻烦.
我们还是从分析代码开始:
<select name="ctl00$cphMain$ddlDeliveryType" id="Select1" disabled="disabled" tabindex="-1" class="txtPreview">
<option selected="selected" value="A">社内</option>
<option value="B">社外</option>
<option value="C">客先社内</option>
</select>
发现服务器端的列表框,生产的就是select这个东西.所以我们只要遍历所有的disabled顺序为true的select控件就可以啦,好像很简单呀!但是就算我们找到了它又怎么用呢,因为disabled后的控件我们是不能改变它的颜色样式的.这个就是我所说的"稍微有点麻烦"的地方.好在有朱王伟(我们公司的高人呀!公司我最敬佩的人物之一)的提示."用一个label替换掉select用于预览时的显示"(虽然后来正是label不能自由设置宽度,导致表格里面的列表框替换后表格会被"压扁",所以应该用div替换之.但是实现的思想却是正确的).实现函数如下:
function DeeperColorForSelect(){
//为了提高效率,先用变量存放一下.
var SelectTotal=document.all.tags("SELECT").length;
//遍历所有的Select,
for(i=0;i<SelectTotal;i++){
if(document.all.tags("SELECT")[i].disabled==true){
ChildrenTotal=document.all.tags("SELECT")[i].length;
//遍历列表框里面的所有option
for(ii=0;ii<ChildrenTotal;ii++){
if(document.all.tags("SELECT")[i].children[ii].selected==true)
{
//创建一个div
var oDIV=document.createElement("DIV");
//前面一个一个空格,是为了防止文字前缩.
oDIV.innerText = " " + document.all.tags("SELECT")[i].children[ii].text;
//对div设置合适的宽度
oDIV.style.width = document.all.tags("SELECT")[i].style.width;
document.all.tags("SELECT")[i].parentElement.appendChild(oDIV);
document.all.tags("SELECT")[i].style.display ="none";
}
}
}
}
}
然后将两个函数稍微合并一下,在你预览画面功能之前调用一下应该就可以解决问题.效果图如下:
