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

本文实例讲述了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拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

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

(0)

相关推荐

  • js/jquery判断浏览器类型的方法小结

    JS获取浏览器信息 复制代码 代码如下: 浏览器代码名称:navigator.appCodeName 浏览器名称:navigator.appName 浏览器版本号:navigator.appVersion 对Java的支持:navigator.javaEnabled() MIME类型(数组):navigator.mimeTypes 系统平台:navigator.platform 插件(数组):navigator.plugins 用户代理:navigator.userAgent js判断IE浏览器

  • jquery 动态调整textarea高度

    我们修正版本,运行后需要刷新下,因为jquery是外部调用的. jquery事件,动画1 50) { $Content.animate({height:"-=50"},400) } }) }) // --> 缩小 放大 香港.旧金山.台湾.3地7年深度访谈,50余幅经典珍藏海报及剧照,林青霞口中的林青霞,名人好友眼中的大明星.邻家女孩:最善良.最勤奋的亚洲第一美女--跨越国界的铁杆粉丝.日裔资深记者亲访林青霞好友及资深影人徐克夫妇.郁正春.宋存寿.赖声川.杜可风.许鞍华.王晶.张

  • jquery动态调整div大小使其宽度始终为浏览器宽度

    有时候我们需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点,不过我们也可以用jquery来实现. 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery test</title> <script src="jquery-1.11.1.min.js"><

  • jQuery下通过$.browser来判断浏览器.

    使用方法: $.browser.['浏览器关键字'] 复制代码 代码如下: $(function() { if($.browser.msie) { alert("this is msie"); } else if($.browser.safari) { alert("this is safari!"); } else if($.browser.mozilla) { alert("this is mozilla!"); } else if($.br

  • 原生javascript和jquery判断浏览器版本等信息

    复制代码 代码如下: <script type="text/javascript"> //jquery判断浏览器信息 $(function(){ var bro=$.browser;//获取浏览器用户代理信息; var bro_msie=bro.msie;//判断是否为ie浏览器,假如为ie浏览器就返回:true,否则返回:undefined; var bro_firefox=bro.mozilla;//判断是否为火狐浏览器:假如为火狐浏览器就返回:true,否则返回:un

  • 使用jQuery不判断浏览器高度解决iframe自适应高度问题

    这里介绍两个超级简单的方法,不用写什么判断浏览器高度.宽度啥的. 下面的两种方法自选其一就行了.一个是放在和iframe同页面的,一个是放在test.html页面的. 注意别放错了地方. iframe的代码中,注意要写ID,没有ID查找不到 复制代码 代码如下: <iframe src="test.html" id="main" width="700" height="300" frameborder="0&q

  • jquery判断浏览器后退时候弹出消息的方法

    浏览器后退时必定会有一些消息,这里使用jquery判断浏览器后退并弹出消息 jQuery(document).ready(function ($) { if (window.history && window.history.pushState) { $(window).on('popstate', function () { var hashLocation = location.hash; var hashSplit = hashLocation.split("#!/&quo

  • jquery判断浏览器类型的代码

    Jquery中利用navigator.userAgent.indexOf来判断浏览器类型,并进行了一下处理,建议学习Jquery的朋友学习下,了解一下思路. 主要使用的方法:$.browser.['浏览器关键字'] 复制代码 代码如下: $(function() { if($.browser.msie) { alert("this is msie"); } else if($.browser.safari) { alert("this is safari!"); }

  • js/jquery判断浏览器的方法小结

    JS获取浏览器信息 浏览器代码名称:navigator.appCodeName 浏览器名称:navigator.appName 浏览器版本号:navigator.appVersion 对Java的支持:navigator.javaEnabled() MIME类型(数组):navigator.mimeTypes 系统平台:navigator.platform 插件(数组):navigator.plugins 用户代理:navigator.userAgent js判断IE浏览器的四种方法: 方法一:

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

    本文实例讲述了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"

  • python selenium在打开的浏览器中动态调整User Agent

    核心代码是: browser.execute_cdp_cmd('Network.setUserAgentOverride', {         "userAgent": "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2226.0 Safari/537.36",         "platform": "Wi

  • jQuery 判断是否包含在数组中Array[]的方法

    jQuery 判断是否包含在数组中Array[]的方法 var Menustr="1,2,3,4,5,6,7,8,9,10,11,12,"; var Menarrstr=Menustr.split(","); if ($.inArray($(this).attr("id"), Menarrstr)) { //... } 以上这篇jQuery 判断是否包含在数组中Array[]的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多

  • JS判断浏览器是否安装flash插件的简单方法

    1. 直接判断是否有flash插件 var myFlash = (function(){ if(typeof window.ActiveXObject != "undefined"){ return new ActiveXObject("ShockwaveFlash.ShockwaveFlash"); }else{ return navigator.plugins['Shockwave Flash']; } })(); chrome: Edge浏览器中取消了wind

  • jquery判断至少有一个checkbox被选中的方法

    本文实例讲述了jquery判断至少有一个checkbox被选中的方法.分享给大家供大家参考.具体实现方法如下: html代码部分: <form> <!-- bunch of checkboxes like: --> <input type="checkbox" ... > <input type="checkbox" ... > <!-- submit button, defaults to disabled -

随机推荐