当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 判断用户浏览器及分辨率调用不同的CSS样式文件

CSS样式表
css 块状元素和内联元素
CSS 盒模型、块状元素与内联元素、CSS选择器
css 浮动 理解Float的含义
CSS 清除浮动Clear
CSS 制作网页导航条(上)
CSS 制作网页导航条(下)
css 浮动(float)页面布局
css 浮动(float)页面布局(下)
css position 定位
css 定位应用实例
CSS Hack 有关浏览器兼容方面
css 单图片按钮实例(css 图片变换)
使用X-UA-Compatible来设置IE浏览器兼容模式
div overflow 超出隐藏属性使用说明
CSS 使用规则总结
div+CSS 兼容小摘
CSS的inherit与auto使用分析
如何组织和注释CSS文件
CSS样式按整洁易懂的结构组织
CSS Prism 查看和编辑CSS中用到的颜色

CSS样式表 中的 判断用户浏览器及分辨率调用不同的CSS样式文件


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 54 ::
收藏到网摘: n/a


  DIV CSS教程:判断用户分辨率调用不同的CSS样式文件
  (未测试 来自网络 请自行验证)
                         以下为引用的内容:
  var IE1024="";
  var IE800="";
  var IE1152="";
  var IEother="";              
  引号里面分别填写,用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。  
                         以下为引用的内容:
  var Firefox1024="";
  var Firefox800="";
  var Firefox1152="";
  var Firefoxother="";             
  引号里面分别填写,用户使用FF的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。  
                         以下为引用的内容:
  var Other1024="";
  var Other800="";
  var Other1152="";
  var Otherother="";             
  引号里面分别填写,用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。
  不判断分辨率,只判断浏览器
  应E.Qiang提议,编如下代码。实现根据浏览器类型自动调用不同CSS。
  代码:
                         以下为引用的内容:
  <SCRIPT LANGUAGE="javascript">
  <!--
  if (window.navigator.userAgent.indexOf("MSIE")>=1)
  {
  file://如果浏览器为IE
  setActiveStyleSheet("default.css");
  }else{
  if (window.navigator.userAgent.indexOf("Firefox")>=1)
  {
  file://如果浏览器为Firefox
  setActiveStyleSheet("default2.css");
  }else{
  file://如果浏览器为其他
  setActiveStyleSheet("newsky.css");
  }
  }
  function setActiveStyleSheet(title){
  document.getElementsByTagName("link")[0].href="style/" title;
  }
  file://-->
  </SCRIPT>             
  解 释:
  如果浏览器为IE,则调用default.css
  如果浏览器为Firefox,则调用default2.css
  如果浏览器为其他,则调用newsky.css
  用法:放在<head></head>中即可。
                         以下为引用的内容:
            
  <SCRIPT LANGUAGE="javascript">
  <!--
  if (window.navigator.userAgent.indexOf("MSIE")>=1)
  {
  var IE1024="";
  var IE800="";
  var IE1152="";
  var IEother="";
  ScreenWidth(IE1024,IE800,IE1152,IEother)
  }else{
  if (window.navigator.userAgent.indexOf("Firefox")>=1)
  {
  file://如果浏览器为Firefox
  var Firefox1024="";
  var Firefox800="";
  var Firefox1152="";
  var Firefoxother="";
  ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)
  }else{
  file://如果浏览器为其他
  var Other1024="";
  var Other800="";
  var Other1152="";
  var Otherother="";
  ScreenWidth(Other1024,Other800,Other1152,Otherother)
  }
  }
  function ScreenWidth(CSS1,CSS2,CSS3,CSS4){
  if ((screen.width == 1024) && (screen.height == 768)){
  setActiveStyleSheet(CSS1);
  }else{
  if ((screen.width == 800) && (screen.height == 600)){
  setActiveStyleSheet(CSS2);
  }else{
  if ((screen.width == 1152) && (screen.height == 864)){
  setActiveStyleSheet(CSS3);
  }else{
  setActiveStyleSheet(CSS4);
  }}}
  }
  function setActiveStyleSheet(title){
  document.getElementsByTagName("link")[0].href="style/" title;
  }
  file://-->
  </SCRIPT>