Wie jQuery den Browser ermittelt und die ausgewählte width_jquery dynamisch anpasst-js-Tutorial-php.cn

Wie jQuery den Browser ermittelt und die ausgewählte width_jquery dynamisch anpasst

WBOY

Freigeben： 2016-05-16 15:12:34

Original

1671 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie jQuery den Browser ermittelt und die Auswahlbreite dynamisch anpasst. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

<!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>

Nach dem Login kopieren

Leser, die an weiteren jQuery-bezogenen Inhalten interessiert sind, können sich die speziellen Themen auf dieser Website ansehen: „Zusammenfassung der Drag-Effekte und Fähigkeiten von JQuery“, „Zusammenfassung der Fähigkeiten der jQuery-Erweiterung“ , „Zusammenfassung der allgemeinen klassischen JQuery-Spezialeffekte“, „Zusammenfassung der Verwendung von jQuery-Animationen und Spezialeffekten“, „Zusammenfassung der Verwendung des JQuery-Selektors“ und „jQuery Allgemeine Plug-Ins und Nutzungsübersicht》

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.