jQuery判断浏览器并动态调整select宽度的方法


Posted in Javascript onMarch 02, 2016

本文实例讲述了jQuery判断浏览器并动态调整select宽度的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <title>Untitled Page</title> 
  <mce:script src="jquery-1.4.4.js" mce_src="jquery-1.4.4.js" type="text/javascript"></mce:script> 
  <mce:script type="text/javascript"><!-- 
    function userBrowser() { 
      var browserName = navigator.userAgent.toLowerCase(); 
      if (/msie/i.test(browserName) && !/opera/.test(browserName)) { 
        browserName="ie"; 
      } else if (/firefox/i.test(browserName)) { 
        browserName = "firefox"; 
      } else if (/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)) { 
        browserName = "chrome"; 
      } else if (/opera/i.test(browserName)) { 
        browserName = "opera"; 
      } else if (/webkit/i.test(browserName) && !(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))) { 
        browserName = "safari"; 
      } else { 
        browserName = "unknow"; 
      } 
      return browserName; 
    } 
    $(function() { 
      var browser = userBrowser(); 
      if (browser == "ie") { 
        $("select").each(function() { 
          $(this).css("width", ($(this).width() + 10) + "px"); 
        }); 
      } 
      else if (browser == "firefox") { 
        $("select").each(function() { 
          $(this).css("width", ($(this).width() + 8) + "px"); 
        }); 
      } 
      else if (browser == "chrome") { 
        $("select").each(function() { 
          $(this).css("width", ($(this).width() + 6) + "px"); 
        }); 
      } 
      else if (browser == "safari") { 
        $("select").each(function() { 
          $(this).css("width", ($(this).width() + 30) + "px"); 
        }); 
      } 
    }); 
// --></mce:script> 
</head> 
<body> 
  <div> 
    <!-- 注: select 在doctype下, 会出现width比同width的text短, ie为6px, ff为4px --> 
    <input id="t1" type="text" style="width: 400px;" /><br /> 
    <select id="s1" style="width: 400px;"> 
      <option>1</option> 
    </select><br /> 
    <textarea id="TextArea1" cols="20" rows="2" style="width: 400px;"> 
  </div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 Javascript
基于Angularjs实现分页功能
May 30 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
小程序中this.setData的使用和注意事项
Aug 28 Javascript
vue 组件简介
Jul 31 Javascript
js实现不重复导入的方法
Mar 02 #Javascript
基于JavaScript实现智能右键菜单
Mar 02 #Javascript
JS简单实现String转Date的方法
Mar 02 #Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 #Javascript
JS判断是否长按某一键的方法
Mar 02 #Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 #Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 #Javascript
You might like
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
discuz安全提问算法
2007/06/06 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
python通过ssh-powershell监控windows的方法
2015/06/02 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
什么是Rollback Segment
2013/04/22 面试题
九州传奇上机题
2014/07/10 面试题
蓝颜请假条
2014/04/11 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
电话营销开场白
2015/05/29 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android