suchen

Heim >Web-Frontend >js-Tutorial >Wie jQuery den Browser ermittelt und die ausgewählte width_jquery dynamisch anpasst

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

WBOY
WBOYOriginal
2016-05-16 15:12:341696Durchsuche

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>

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.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JavaScript HTML5 Canvas zeichnet Clock Effect_Javascript-Fähigkeiten ausNächster Artikel：JavaScript HTML5 Canvas zeichnet Clock Effect_Javascript-Fähigkeiten aus

In Verbindung stehende Artikel

Mehr sehen