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 相关文章推荐
javascript之典型高阶函数应用介绍
Jan 10 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
javascript回调函数的概念理解与用法分析
May 27 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
Nest.js 授权验证的方法示例
Feb 22 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 不使用js实现页面跳转
2014/02/11 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
微信小程序开发实现消息推送
2020/11/18 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
Python随机生成数模块random使用实例
2015/04/13 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
python线性插值解析
2020/07/05 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
社区文艺活动方案
2014/08/19 职场文书
党员个人总结范文
2015/02/14 职场文书
专家推荐信范文
2015/03/26 职场文书
56句经典英文座右铭
2019/08/09 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
Matlab如何实现矩阵复制扩充
2021/06/02 Python
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记