通过 Javascript 实现的 CSS 浏览器选择符(CSS Browser Selector)

作者: CodeBit.cn     来源: CodeBit.cn     时间: 2008-03-02 12:30:10
摘要: CSS 在不同浏览器下的最终显示效果是不同的,因此,出现了很多根据不同浏览器作相应处理的 HACK 技术,本文介绍的是通过 Javascript 检测浏览器和操作平台类型,然后设置特定选择符。设置样式时,通过 CSS 的包含选择符,我们很容易就能根据不同浏览器作出不同处理。
归类: Javascript, (X)HTML/CSS,

关键词: 操作系统, 版本, 浏览器, 选择符, selector, CSS, HACK,


CSS 在不同浏览器下的最终显示效果是不同的,因此,出现了很多根据不同浏览器作相应处理的 HACK 技术,本文介绍的是通过  Javascript 检测浏览器和操作平台类型,然后设置特定选择符。设置样式时,通过 CSS 的包含选择符,我们很容易就能根据不同浏览器作出不同处理。


--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------


Javascript:
  1.  
  2. <script type="text/javascript">
  3. // 说明 : 通过 Javascript 实现的 CSS 浏览器选择符(CSS Browser Selector)
  4. // 整理 : CodeBit.cn ( http://www.codebit.cn )
  5.  
  6. // CSS Browser Selector v0.2.5
  7. // Documentation: http://rafael.adm.br/css_browser_selector
  8. // License: http://creativecommons.org/licenses/by/2.5/
  9. // Author: Rafael Lima (http://rafael.adm.br)
  10. // Contributors: http://rafael.adm.br/css_browser_selector#contributors
  11. var css_browser_selector = function() {
  12. var
  13. ua=navigator.userAgent.toLowerCase(),
  14. is=function(t){ return ua.indexOf(t) != -1; },
  15. h=document.getElementsByTagName('html')[0],
  16. b=(!(/opera|webtv/i.test(ua))&&/msie (\d)/.test(ua))?('ie ie'+RegExp.$1):is('gecko/')? 'gecko':is('opera/9')?'opera opera9':/opera (\d)/.test(ua)?'opera opera'+RegExp.$1:is('konqueror')?'konqueror':is('applewebkit/')?'webkit safari':is('mozilla/')?'gecko':'',
  17. os=(is('x11')||is('linux'))?' linux':is('mac')?' mac':is('win')?' win':'';
  18. var c=b+os+' js';
  19. h.className += h.className?' '+c:c;
  20. }();
  21. </script>
  22.  



其原理是:先用 js 检测浏览器类型和操作系统平台,然后给最高节点 “HTML” 赋上对应的 class ,然后在设置样式时,我们就可以通过 css 的包含选择符,根据不同浏览器作出不同处理了。




推荐链接:(联系 QQ :326801485)