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

本文实例讲述了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程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, 判断浏览器
, 动态调整
select宽度
jquery获取浏览器宽度、jquery 浏览器宽度、jquery判断浏览器宽度、jquery select 宽度、jquery select2 宽度,以便于您获取更多的相关知识。

时间: 2016-03-02

jQuery判断浏览器并动态调整select宽度的方法_jquery的相关文章

jquery判断浏览器后退时候弹出消息的方法_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增加、删除及修改select option的方法_jquery

本文实例讲述了jQuery增加.删除及修改select option的方法.分享给大家供大家参考,具体如下: jQuery获取Select选择的Text和Value: 1. //获取Select选择的Text var checkText=jQuery("#select_id").find("option:selected").text(); 2. //获取Select选择的option Value var checkValue=jQuery("#selec

jQuery实现html表格动态添加新行的方法_jquery

本文实例讲述了jQuery实现html表格动态添加新行的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

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

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

jquery判断复选框是否被选中的方法_jquery

jquery 判断复选框是否选中以及如何选中的问题做一下总结. 进入正题,还是当页面有如下一组复选框的时候: <input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="orange" />橘子 <input type=&q

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

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[]的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多

jquery判断页面网址是否有效的两种方法_jquery

方法一:(jQuery方法: 适用所有浏览器) HTML页面: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.7.1.min.js">&l

jQuery判断指定id的对象是否存在的方法_jquery

jQuery判断指定id的对象是否存在,只需要判断对象的length是否大于0即可. 示例: 正确的判断写法如下: if($("#object_id").length>0) { alert('对象存在'); } else { alert('对象不存在'); } 或者直接使用原生的 Javascript 代码来判断: if(document.getElementById("id")) { alert('对象存在'); } else { alert('对象不存在'

用JQuery 判断某个属性是否存在hasAttr的解决方法_jquery

在JQuery编码中,我们会判断元素是否存在某个属性.比如是否包含 class="new" 的样式呢.JQuery判断就非常简单了,因为有 hasClass这个方法 $("input[name=new]").hasClass("new") 即可判断. 但是有时候我们需要判断别的属性,比如有的 a 链接包含 rel 属性,有的没有rel属性.这时该怎么判断呢? 这时就没有现成的方法了. 如果存在某个属性 $("#aid").at