jQuery判斷瀏覽器并動態(tài)調(diào)整select寬度的方法

字號:


    本文實例講述了jQuery判斷瀏覽器并動態(tài)調(diào)整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下, 會出現(xiàn)width比同width的text短, ie為6px, ff為4px --> 
        <input id="t1" type="text" /><br /> 
        <select id="s1"> 
          <option>1</option> 
        </select><br /> 
        <textarea id="TextArea1" cols="20" rows="2"> 
      </div>
    </body>
    </html>
    希望本文所述對大家jQuery程序設(shè)計有所幫助。