上一篇文章我们创建了一个cssObj对象,我们在里面添加了一个能力检测结果的属性和一个获取CSS样式的方法,但是这个对象和方法还不够完美!
为什么呢?
原因就是我们没有对传入参数进行合法性验证以及还没有对javascript中的保留关键字float进行处理,所以,当我们传入非法参数和查询float属性时,会发生脚本错误!
这当然是我们不想看到的!
首先,我们进行参数的合法性判断,在getCSS()方法中,接收2个参数,第一个是DOM元素对象,第二个是需要查询的CSS属性名称,我们知道,第一个参数必须要是DOM元素对象,不能是var a={};这样的对象,也不是一个数组或者new出来的对象,那么如何知道传入的对象是DOM元素呢?
1、第一个参数typeof结果必须是object;
我们可以加一个if判断(在getCSS()方法中):
if(typeof DOMObj !== "object"){ return; };
2、第一个参数必须是DOM元素;
怎么才可以知道是不是DOM元素呢?对于这个问题,我们可以想一想DOM元素独有的共性,很显然,每一个DOM元素都有一个节点类型以及节点名称、标签名(这也不是完全绝对的,我们要是传入这样一个对象var a={nodeType:1,nodeName:"div",nodeValue:null,tagName:"div"}就郁闷了,但是,我觉得传这样的对象进去为了制造脚本错误的人都是"傻""逼"!),所以我们可以这样判断:
if(DOMObj.nodeType !== 1||DOMObj.nodeName){return;};
3、第二个参数typeof结果必须是string;
我们同样使用一个if判断:
if(typeof cssName !== "string"){return;};
然后,我们来进行float保留关键字的处理,这里又涉及到IE和非IE的处理方案。在IE和非IE(W3C标准)中,float用styleFloat(IE)和cssFloat(W3C)代替,我们需要做的就是把这些统统都换成float(或者在你自己的框架中的一个你认为合法又漂亮的字符串)。
在IE的条件下(currentStyle):
if(cssName==="float"||cssName==="styleFloat"||cssName==="cssFloat"){
return DOMObj.currentStyle["styleFloat"];
};
在非IE的条件下(document.defaultView.getComputedStyle):
if(cssName==="float"||cssName==="styleFloat"||cssName==="cssFloat"){
return window.document.defaultView.getComputedStyle(DOMObj,null)["cssFloat"];
};
到这里,我们的获取CSS的方法算是接近完美了,也可以将这个方法放到你自己的库里面去,提供给别人使用,但是也有不足的地方,不足的就是如果查询到的CSS属性是空值的问题,在FF中通常返回空字符串,而有些浏览器则返回undefined,当然,这只是一点小问题,在函数返回前检测一下是否是空字符串,如果是空字符串就返回undefined就行了!
同时,可以在前一篇中介绍的那个对象中再添加一个setCSS()方法(也需要处理float保留关键字),那就更加完美了!当然这个函数很简单,这里就不再写了!
JavaScript获取CSS样式的问题(2),布布扣,bubuko.com