现在 css3 出来了, 添加了许多新特性,但由于并未全部浏览器都实现了这些特性,使用起来不太顺畅。因此,就想在使用的时候进行判断,如果有这个属性并且支持这种值,就 css 实现, 否者就用 js 实现。
比较明显的例子就是 text-overflow 这个属性,text-flow:clip 是大部分浏览器都支持的,而 text-flow:ellipsis 则在 firefox 和 10.6 版本以下 opera 上工作不了,让人相当头疼。
废话少说,判断的代码如下:
1 2 3 4 5 6 7 |
var element = document.createElement('div'); if('textOverflow' in element.style){ element.style['textOverflow'] = 'ellipsis'; return element.style['textOverflow'] === 'ellipsis'; }else{ return false; } |
这个判断的原理是:创建一个节点,判断其的 style 属性是否含有 textOverflow 属性,有则进一步判断是否支持 ellipsis 这个值。
判断是否支持 ellipsis 值依靠的是浏览器对于非法 style 值的处理,当遇到不支持的属性值时,浏览器会直接把这个值抛弃。因此这里就可以先给 textOverflow 赋值 “ellipsis”,如果不支持,则其值肯定为空或者其它不等于 “ellipsis” 的值。因此只要判断赋值后的 textOverflow 是否等于 “ellipsis” 即可。