前端工作中的点点滴滴（一）

标签：c   style   class   blog   code   java   

     验证一个css属性是否被支持，这算是一个比较基础的问题。另外一方面，我们不仅想知道一个属性是否被支持，还想知道某个属性的特定类型的值是否被支持。例如background-color可以有rgba类型的数值，但并不是所有浏览器都支持，如何确定一款浏览器支不支持rgba类型的值呢？我认为Modernizr这款库就为我们提供了一个很好的手段。Modernizr是如何做的呢？具体来说用到了【属性】这个概念，这个概念在C#中显得非常重要。只有当你输入的数值是合法的，才会继续后面的操作。也就是，对于浏览器来说，只有当你的css属性书写正确，浏览器才会去设置这个属性，反之就不回。比如我们可以在chrome里面试一试，把css的属性值乱写一个，会显示有一个横划线，表示失败，失败的属性是无法读取出来的。而Modernizr库恰好利用了这一点来验证rgba是否被支持。

     首先，利用javascript设置元素的css数值：

1  function setCss( str ) {
2         mStyle.cssText = str;
3     }

    接着，验证这个属性是否被插入成功：

 function contains( str, substr ) {
        return !!~(‘‘ + str).indexOf(substr);
    }

    在这里，我们可以看到一中小技巧。indexof返回的数值是-1或0或正整数，如何对这三类数值规化成为false或true呢？这里Modernizr采用的是！！~。也就是两个逻辑非和一个按位非。按位非可以把一个数变成负数减一，而！对于0以外的其他数字的运算结果都是false，于是当indexof的运算结果为-1时运算下来恰好是false，而不为-1时又恰好为true,于是顺利得到了bool类型的返回值。不过要是我写的话，可能不会这么绕，会来的干脆点，直接用？：三目运算符，看的非常直接干脆。

return str.indexOf("substr")==-1?false:true;

   有了上面这两个函数，就可以进行判断了，比如在Modernizr中是这么判断rgba的：

1  tests[‘rgba‘] = function() {
2         setCss(‘background-color:rgba(150,255,150,.5)‘);
3 
4         return contains(mStyle.backgroundColor, ‘rgba‘);
5     };

   其实这里面我们可以看到，既然已经在contains函数里面用到了【属性】的思想，其实就没必要验证有没有rgba这个值了，直接验证有没有background-color这个属性就可以了，如果数值是非法的，则整个属性都不会添加到css样式表里面去。

  所以我给出的判断是这样的：

1 // 测试浏览器是否支持某种css表达
2     function testCSS( styleName, styleValue ) {
3         var el = document.createElement( "div" );
4         el.style.setProperty( styleName, styleValue, "" );
5         return !!el.getAttribute( "style" );
6     }

   这样一来就可以对任意的css属性进行判断，很方便。

   其实现实中我没有用到过Modernizr，感觉为了搞一个css测试还要引入一个几百行的js库真是没事干，不如自己写一个。但是有一个很好的地方值得自己学习，就是他把css属性是否支持作为body上的css类，这种方法非常好，因为可以直接和css进行交互了。而且【状态】用css来表述比较好，可以让一些工作有浏览器来做。

前端工作中的点点滴滴（一）,布布扣,bubuko.com

前端工作中的点点滴滴（一）

标签：c   style   class   blog   code   java   

原文地址：http://www.cnblogs.com/bluedreamviwer/p/beijing.html