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 相关文章推荐
两个SUBMIT按钮,如何区分处理
Aug 22 Javascript
JS 遮照层实现代码
Mar 31 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
小试JQuery的AutoComplete插件
May 04 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
vue中页面跳转拦截器的实现方法
Aug 23 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
了解重排与重绘
May 29 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
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
PHP闭包函数详解
2016/02/13 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
Using the TextRange Object
2006/10/14 Javascript
表单元素事件 (Form Element Events)
2009/07/17 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
Python获取指定字符前面的所有字符方法
2018/05/02 Python
Python获取时间戳代码实例
2019/09/24 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
linux面试题参考答案(6)
2016/06/23 面试题
股东授权委托书范本
2014/09/13 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android