首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

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

- Author -

yenange

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
js网页侧边随页面滚动广告效果实现
Apr 14 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 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
BufferPool(1) 逻辑函数(1) http_stub_status_module(1) 缓存机制(1) element-ui(1) 数据合并(1) pongo2(1) 连接查询(1) 复合索引(1) 模板引擎(1)
You might like
PHP中strtotime函数使用方法分享
2012/01/10 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
PHP中Static（静态）关键字功能与用法实例分析
2019/04/05 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
前端面试知识点锦集（JavaScript篇）
2016/12/28 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
对Python中画图时候的线类型详解
2019/07/07 Python
Python字节单位转换实例
2019/12/05 Python
python之语音识别speech模块
2020/09/09 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
英国游戏机和游戏购物网站：365games.co.uk
2018/06/18 全球购物
英国设计的甲板鞋和船鞋：Chatham
2018/12/06 全球购物
加拿大领先的时尚和体育零售商：Sporting Life
2019/12/15 全球购物
问卷调查计划书
2014/01/10 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers