zoukankan      html  css  js  c++  java
  • JavaScript获取CSS样式的问题(2)

      上一篇文章我们创建了一个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保留关键字),那就更加完美了!当然这个函数很简单,这里就不再写了!

  • 相关阅读:
    道路计划猿练级(笔者:陈浩)
    OpenCV——Delaunay三角 [转载]
    mysql声明摘要
    JDBC公共动作类
    Android SharedPreferences复杂的存储
    SAP ABAP规划 SY-REPID与SY-CPROG差额
    在我的眼里,生产主管(1)——如何做竞争分析
    Oracle生成查询包括对应于所有数据表记录语句中指定的字段名
    SDUT 2894-C(最短spfa)
    人脉的本质
  • 原文地址:https://www.cnblogs.com/reent/p/3841501.html
Copyright © 2011-2022 走看看