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

- Author -

yenange

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

Javascript 相关文章推荐

精解window.setTimeout()&window.setInterval()使用方式与参数传递问题！

Nov 23 Javascript

extjs 如何给column 加上提示

Jul 29 Javascript

javascript高级编程之函数表达式递归和闭包函数

Nov 29 Javascript

JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法

Jan 12 Javascript

jQuery解析与处理服务器端返回xml格式数据的方法详解

Jul 04 Javascript

详解Javascript中prototype属性(推荐)

Sep 03 Javascript

vue-swiper的使用教程

Aug 30 Javascript

详解Vue 动态组件与全局事件绑定总结

Nov 11 Javascript

Vue组件教程之Toast(Vue.extend 方式)详解

Jan 27 Javascript

Node.js学习教程之Module模块

Sep 03 Javascript

JavaScript枚举选择jquery插件代码实例

Nov 17 jQuery

JS监听Esc 键触发事键

Apr 14 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