Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie ermittelt JavaScript, ob der Browser CSS3-Attribute unterstützt?

不言
Freigeben: 2018-06-25 16:17:56
Original
1483 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich vor, wie JavaScript feststellen kann, ob der Browser einen bestimmten Referenzwert hat. Jetzt können Freunde in Not darauf verweisen.

Tatsächlich verwende ich css3 Um die Unfreundlichkeit von Low-End-Browsern gegenüber CSS3 zu berücksichtigen, ist es bei einigen Attributen häufig erforderlich zu wissen, ob bestimmte Browser die zu verwendenden CSS3-Attribute unterstützen, um eine Abwärtsanpassung vorzunehmen. Beispielsweise muss bei gängigen CSS3-Animationen geprüft werden, ob der Browser diese unterstützt. In diesem Artikel werden im Folgenden mehrere Methoden beschrieben, auf die sich Freunde in Not beziehen können.

Vorwort

Das Aufkommen von CSS3 hat die Leistung von Browsern bunter gemacht. Die größte Wirkung hat die Animation im täglichen Schreiben Animation Bei der Verwendung muss im Voraus festgestellt werden, ob der Browser dies unterstützt, insbesondere beim Schreiben einer CSS3-Animationsbibliothek. Beispielsweise wird transition von animation-play-state nur von einigen Browsern unterstützt.

Die folgende Methode kann mithilfe eines Skripts ermitteln, ob der Browser ein bestimmtes CSS3-Attribut unterstützt:

Die erste Methode: Javascript wird häufiger mit dem folgenden Code verwendet:

var support_css3 = (function() {
 var p = document.createElement('p'),
  vendors = 'Ms O Moz Webkit'.split(' '),
  len = vendors.length;
 
 return function(prop) {
  if ( prop in p.style ) return true;
 
  prop = prop.replace(/^[a-z]/, function(val) {
   return val.toUpperCase();
  });
 
  while(len--) {
   if ( vendors[len] + prop in p.style ) {
   return true;
   } 
  }
  return false;
 };
})();
Nach dem Login kopieren

Verwendung: Überprüfen Sie, ob unterstützt wirdtransform

if(support_css3('transform')){

}else{

}
Nach dem Login kopieren

Zweitens: JavaScript-Methode 2: ie6 wird nicht unterstützt

function isPropertySupported(property)
{
 return property in document.body.style;
}
Nach dem Login kopieren

Verwenden Sie:

Merken Sie sich die oben genannten Attribute und ersetzen Sie backgroundColorbackground-color

if(isPropertySupported('opacity')){

}else{

}
Nach dem Login kopieren

mit Drittens: CSS.supports

CSS.suports ist eine besondere unter den CSS3-@support-Regeln. Jeder, der die @support-Regel unterstützt, unterstützt die folgende Funktion (dies ist nicht empfohlen) Methode, schließlich ist @support auch kompatibel, einige Browser unterstützen möglicherweise eine der CSS3-Eigenschaften, aber nicht @support)

//pass the same string as you pass to the @supports rule
if(CSS.supports("(background-color: red) and (color:white"))
{
 document.body.style.color = "white";
 document.body.style.backgroundColor = "red";
}
Nach dem Login kopieren

Endlich Lassen Sie mich eine weitere Funktion teilen, um festzustellen, ob der Browser bestimmte HTML5-Attribute unterstützt, z. B. ob das Eingabeattribut palaceholder unterstützt.

function elementSupportsAttribute(element, attribute) {
 var test = document.createElement(element);
 if (attribute in test) {
 return true;
 } else {
 return false;
 }
};
Nach dem Login kopieren

Verwendung:

if (elementSupportsAttribute("textarea", "placeholder") {

} else {
 // fallback
}
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist zur chinesischen PHP-Website!

Verwandte Empfehlungen:

Über JavaScript zum Erstellen einfacher Rahmendiagramme

Über js zum Übergeben von Array-Parametern an den Hintergrundcontroller Methode

Das obige ist der detaillierte Inhalt vonWie ermittelt JavaScript, ob der Browser CSS3-Attribute unterstützt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage