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

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;
 };
})();

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

if(support_css3('transform')){

}else{

}

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

function isPropertySupported(property)
{
 return property in document.body.style;
}

Verwenden Sie:

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

if(isPropertySupported('opacity')){

}else{

}

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";
}

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;
 }
};

Verwendung:

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

} else {
 // fallback
}

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!