Eine handgeschriebene Javascript-getStyle-Funktion, die mit verschiedenen Browsern kompatibel ist (den Stil eines Elements abrufen)_Javascript-Kenntnisse

Es gab schon immer viele Kompatibilitätsprobleme beim Abrufen des berechneten Stils von HTML-Elementen. Es gibt einige Unterschiede in jedem Browser, der die W3C-Standardmethode unterstützt: getComputedStyle(), während IE6/7/. 8 unterstützt die Standardmethode nicht, verfügt aber über private Eigenschaften, um sie zu implementieren: currentStyle, sowohl IE9 als auch Opera unterstützen sie. Mit diesen beiden Methoden und Attributen können grundsätzlich die meisten Anforderungen erfüllt werden.

Code kopieren Der Code lautet wie folgt:

var getStyle = function( elem, type ) {
'getComputedStyle' im Fenster zurückgeben ? getComputedStyle(elem, null)[type] : elem.currentStyle[type];
};

Aber für adaptive Breite und Höhe können Sie den berechneten Wert nicht mit currentStyle erhalten. Sie können nur auto zurückgeben, und getComputedStyle() kann den berechneten Wert zurückgeben. Es gibt mehrere Möglichkeiten, dieses Problem zu lösen. Was ich mir vorher überlegt habe, war, den Füllwert von clientWidth/clientHeight zu subtrahieren, damit die berechnete Breite und Höhe in Browsern erhalten werden kann, die die Standardmethode nicht unterstützen. Vor ein paar Tagen habe ich gesehen, dass Situ Zhengmei eine andere Methode verwendet hat, indem er die Methode getBoundingClientRect() verwendet hat, um die Position des Elements auf der Seite zu ermitteln. Dann subtrahiert man rechts von links die Breite und unten minus oben die Höhe. Ich habe einige kleine Änderungen an seinem Code vorgenommen und der endgültige Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

var getStyle = function( elem, style ) {
return 'getComputedStyle' in window ?
getComputedStyle( elem, null )[style] :
function(){
style = style.replace( /-(w)/g, function( $, $1 ){
return $1.toUpperCase();
});

var val = elem.currentStyle[style];

if( val === 'auto' && (style === "width" || style === "height") ){
var rect = elem.getBoundingClientRect();
if( style === "width" ){
return rect.right - rect.left 'px';
}else{
return rect.bottom - rect.top 'px';
}
}
Rückgabewert;
}();
};

// Diese Methode aufrufen
var test = document.getElementById( 'test' ),
// Berechnete Breite abrufen
tWidth = getStyle( test, 'width' );

Neue Frage: Wenn die Breite oder Höhe des Elements em- oder %-Einheiten verwendet, ändert der von getComputedStyle() zurückgegebene Wert automatisch em oder % in px-Einheiten, currentStyle jedoch nicht, und wenn es sich um eine Schriftart handelt, wird die Größe verwendet em als Einheit und gibt 0em unter Opera zurück. Opera ist wirklich beängstigend!

Später habe ich während der Verwendung einige unerwartete Kompatibilitätsprobleme festgestellt. Heute habe ich den Originalcode optimiert und einige häufige Kompatibilitätsprobleme behoben.

In JavaScript stellt „-“ (Bindestrich oder Bindestrich) ein Minuszeichen dar, und in CSS haben viele Stilattribute dieses Symbol, wie z. B. padding-left, Schriftgröße usw. Wenn also Folgendes gilt Code erscheint in Javascript, es handelt sich um einen Fehler:

Kopieren Sie den Code Der Code lautet wie folgt:

elem .style .margin-left = "20px";

Die korrekte Schreibweise sollte sein:

Code kopieren Der Der Code lautet wie folgt:

elem.style.marginLeft = "20px";

Hier müssen Sie die Unterstreichung in CSS entfernen und die Buchstaben direkt nach der Unterstreichung groß schreiben, allgemein bekannt als „camel“. case" Die Schreibmethode, unabhängig davon, ob Sie Javascript verwenden, um den CSS-Stil des Elements festzulegen oder abzurufen, sollte in Kamelfall geschrieben werden. Viele unerfahrene Freunde, die mit CSS, aber nicht mit Javascript vertraut sind, werden jedoch immer diesen einfachen Fehler machen. Mithilfe der erweiterten Verwendung von „replace“ können Sie den Unterstrich im CSS-Attribut leicht durch Camel-Case-Schreibweise ersetzen.

Code kopieren Der Code lautet wie folgt:

var newProp = prop.replace( /-(w) /g, function( $, $1 ){
return $1.toUpperCase();
});

Für float ist es ein reserviertes Wort in JavaScript. Es gibt andere alternative Möglichkeiten, den Float-Wert eines Elements in JavaScript festzulegen oder abzurufen. In Standardbrowsern ist es cssFloat, und in IE6/7/8 ist es das styleFloat .

Wenn „oben“, „rechts“, „unten“ und „links“ keinen expliziten Wert haben, geben einige Browser beim Abrufen dieser Werte einen Auto-Wert zurück. Obwohl der Auto-Wert ein legaler CSS-Attributwert ist, ist er keineswegs das, was wir wollen Das Ergebnis sollte 0px sein.

Um die Transparenz von Elementen in IE6/7/8 festzulegen, müssen Sie Filter verwenden, wie zum Beispiel: filter:alpha(opacity=60). Bei Standardbrowsern unterstützt IE9 einfach beide Schreibmethoden Es wurde auch Kompatibilität zum Erhalten der Transparenz von Elementen implementiert. Solange Sie Opazität verwenden, können Sie die Transparenzwerte aller Browserelemente erhalten.

Das Ermitteln der Breite und Höhe von Elementen in IE6/7/8 wurde im vorherigen Artikel vorgestellt und wird hier nicht wiederholt. Beachten Sie außerdem, dass Sie, wenn der Stil des Elements mit „style inline“ geschrieben wurde oder das Stilattribut mit JavaScript festgelegt wurde, die folgende Methode verwenden können, um den berechneten Stil des Elements zu erhalten:

Code kopieren Der Code lautet wie folgt:

var height = elem.style.height;

Diese Methode ist schneller als das Lesen des Attributwerts in getComputedStyle oder currentStyle und sollte zuerst verwendet werden. Voraussetzung ist natürlich, dass der Stil durch Inline-Schreiben festgelegt wird (es wird auch Javascript zum Festlegen des Inline-Stils verwendet). Der optimierte endgültige Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

var getStyle = function( elem, p ) {
var rPos = /^(left|right|top|bottom)$/,
ecma = "getComputedStyle" in window,
// Konvertieren Sie den Unterstrich in Kamel-Schreibweise, wie zum Beispiel: padding-left = > paddingLeft
p = p.replace( /-(w)/g, function( $, $1 ){
return $1.toUpperCase();
});
// Float verarbeiten
p = p === "float" ? ( ecma ? "cssFloat" : "styleFloat" ) : p;

return !!elem.style[p] ? p]:
ecma ?
function(){
var val = getComputedStyle( elem, null )[p];
// Behandeln Sie den Fall, in dem oben, rechts, unten und links automatisch sind
if( rPos.test(p) && val === "auto" ){
return "0px";
}
return val;
}() :
function( ) {
var wirelesscasinogames.com val = elem.currentStyle[p];
// Elemente in IE6/7/ abrufen 8 Die Breite und Höhe in
if( (p === "width" || p === "height") && val === "auto" ){
var rect = elem.getBoundingClientRect() ;
return ( p === "width" ? rect.right - rect.left : rect.bottom - rect.top ) "px";
}
// Elemente in IE6/7 abrufen 8 Transparenz in
if( p === "opacity" ){
var filter = elem.currentStyle.filter;
if( /opacity/.test(filter) ){
val = filter .match( /d / )[0] / 100;
return (val === 1 || val === 0) ? val.toFixed(0) : val.toFixed(1);
}
else if( val === undefiniert ){
return "1";
}
}
// Behandeln Sie den Fall, in dem oben, rechts, unten und links automatisch sind
if ( rPos.test(p) && val === "auto" ){
return "0px";
}
return val;
}();
};

Das Folgende ist ein Beispielaufruf:

Code kopieren Der Code lautet wie folgt:

<script><P>var box = document.getElementById( "box" );<BR> alert( getStyle(box, "width") ); // "500px"<P>alert( getStyle(box, "background-color") ); // "rgb(0, 0, 0)" / "#000"<BR>alert( getStyle(box, "opacity") ); // "0.6"<BR>alert( getStyle(box, "float") ); script><BR><BR><BR></script>