現在 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” 即可。