Es gibt immer viele Kompatibilitätsprobleme, um die Berechnungsstile von HTML -Elementen zu erhalten, und es gibt einige Unterschiede zwischen Browsern. Firefox und Webkit (Chrome, Safari) unterstützen die W3C -Standardmethode: GetComputedStyle (), während IE6/7/8 die Standardmethode nicht unterstützt, sondern private Attribute zur Implementierung: CurrentStyle, IE9 und Opera -Unterstützung beider. Mit diesen 2 Methoden und Attributen können die meisten Anforderungen im Grunde genommen erfüllt werden.
Die Codekopie lautet wie folgt:
var getStyle = function (elem, type) {
Return 'GetComputedStyle' im Fenster? getComputedStyle (Elem, NULL) [Typ]: Elem.CurrentStyle [Typ];
};
Die Verwendung von CurrentStyle für die adaptive Breite und Höhe kann jedoch nicht den berechneten Wert erhalten, sodass er nur automatisch zurückgeben kann, und GetComputedStyle () kann den berechneten Wert zurückgeben. Es gibt verschiedene Möglichkeiten, dieses Problem zu lösen. Was ich zuvor dachte, war, den Padding -Wert mithilfe 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 sah ich, wie situ zhengmei eine andere Methode angewendet hat, wobei die Methode von GetBoundingClientRect () verwendet wurde, um die Position des Elements auf der Seite zu erhalten. Anschließend links ist die Breite, die untere Subtrahiertoper ist die Höhe. Ich habe einige geringfügige Änderungen an seinem Code vorgenommen, und der endgültige Code lautet wie folgt:
Die Codekopie lautet wie folgt:
var getStyle = function (elem, style) {
Return 'GetComputedStyle' im Fenster?
GetComputedStyle (Elem, Null) [Stil]:
Funktion(){
style = style.replace (//-(/w)/g, Funktion ($, $ 1) {
return $ 1.touppercase ();
});
var val = elem.currentStyle [Stil];
if (val === 'auto' && (style === "width" || style === "Höhe")) {
var rect = elem.getBoundingClientRect ();
if (style === "Breite") {
return rect.Right - rect.left + 'px';
}anders{
return rect.bottom - rect.top + 'px';
}
}
Rückkehr val;
} ();
};
// diese Methode nennen
var test = document.getElementById ('Test'),
// Erhalten Sie die kalkulierte Breite
twidth = getStyle (test, 'width');
Neues Problem, wenn die Breite oder Höhe des Elements EM- oder % -Einheiten verwendet, wechselt der von GetComputedStyle () zurückgegebene Wert automatisch EM oder % in PX -Einheiten, und CurrentStyle wird dies nicht. Wenn die Schriftgröße Em als Einheiten verwendet, ist der zurückgegebene 0EM unter Opera wirklich beängstigend!
Später fand ich einige unerwartete Kompatibilitätsprobleme in meiner Verwendung. Heute habe ich den ursprünglichen Code optimiert und mich mit einigen gemeinsamen Kompatibilitätsproblemen befasst.
In JavaScript "-" (Scribing oder Bindestrich) repräsentiert ein Minuszeichen, während in CSS viele Stileigenschaften dieses Symbol wie Padding-Links, Schriftgrößen usw. haben. Wenn der folgende Code in JavaScript angezeigt wird, ist dies ein Fehler:
Die Codekopie lautet wie folgt: Elem.Style.Margin-left = "20px";
Der richtige Weg, es zu schreiben, sollte sein:
Die Codekopie lautet wie folgt: Elem.Style.Marginleft = "20px";
Hier müssen Sie die Mitte des CSS entfernen und die Buchstaben, die ursprünglich von der Mitte des Schreibens gefolgt wurden, die als Schreibmethode "Kamelstil" bezeichnet werden. Unabhängig davon, ob es JavaScript verwendet, um Elemente festzulegen oder zu erhalten, sollte der CSS -Stil der Kamelstil sein. Viele Neulinge, die mit CSS vertraut sind, aber mit JavaScript nicht vertraut sind, werden diesen Fehler immer auf niedriger Ebene machen. Durch die Verwendung der erweiterten Verwendung von Ersatz kann die Mittelklasse im CSS-Attribut einfach durch den Kamelstil ersetzt werden.
Die Codekopie lautet wie folgt: var newProp = prop.replace (//-(/w)/g, Funktion ($, $ 1) {
return $ 1.touppercase ();
});
Für Float ist es ein reserviertes Wort in JavaScript. Es gibt andere Alternativen, um den Schwimmerwert des Elements in JavaScript festzulegen oder zu erhalten. Es ist CSSFloat in Standardbrowsern und Stylefloat in IE6/7/8.
Wenn es keine expliziten Werte für obere, rechte, unten und links gibt, gibt einige Browser beim Erhalten dieser Werte ein Auto zurück. Obwohl der Wert von Auto ein legaler CSS -Attributwert ist, ist dies keineswegs das gewünschte Ergebnis, sollte aber 0PX sein.
In IE6/7/8, um die Transparenz eines Elements zu setzen, Filter wie: Filter: Alpha (Opazität = 60), für Standardbrowser, einfach die Opazität direkt festlegen, und beide Unterstützung für IE9 -Schreibmethoden habe auch die Verarbeitung von Kompatibilität vorgenommen, um die Transparenz von Elementen zu erhalten. Solange Sie Deckkraft verwenden, können Sie den Transparenzwert aller Browserelemente erhalten.
Im vorherigen Artikel wurde die Breite und Höhe des Elements in IE6/7/8 eingeführt, damit ich sie hier nicht wiederholen werde. Eine andere Sache zu beachten ist, dass Sie die folgende Methode verwenden können, um den berechneten Stil des Elements zu erhalten:
Die Codekopie lautet wie folgt:
var height = Elem.Style.Height;
Diese Methode ist schneller als das Lesen der Eigenschaftswerte in GetComputedStyle oder CurrentStyle und sollte zuerst verwendet werden. Natürlich ist die Voraussetzung, dass der Stil durch Inline -Schreiben eingestellt wird (mithilfe von JavaScript -Einstellungen wird auch Inline -Stile festgelegt). Der optimierte endgültige Code lautet wie folgt:
Die Codekopie lautet wie folgt:
var getStyle = function (elem, p) {
var rpos = /^(links | rechts | oben | unten) $ /,,,
ecma = "getComputedStyle" im Fenster,
// Umwandeln Sie die Mitte des Schreibens in ein Kamelmuster wie: padding-links => paddingleft
P = P.Replace (//-(/w)/g, Funktion ($, $ 1) {
return $ 1.touppercase ();
});
// Process Float
p = p === "Float"? (ECMA? "CSSFloat": "Stylefloat"): P;
Return !! Elem.Style [p]?
Elem.Style [P]:
ECMA?
Funktion(){
var val = getComputedStyle (Elem, null) [p];
// Behandle die Situation, in der oben, rechts, unten und links automatisch sind
if (rpos.test (p) && val === "auto") {
zurück "0px";
}
Rückkehr val;
} ():
Funktion(){
var <a href = "http://wirelesscasinogames.com"> WirelessCasinogames.com </a> val = elem.currentStyle [p];
// Holen Sie sich die Breite und Höhe des Elements in IE6/7/8
if ((p === "Breite" || p === "Höhe") && val === "auto") {
var rect = elem.getBoundingClientRect ();
return (p === "width"? rect.Right - rect.Left: rect.bottom - rect.top) "px";
}
// Erhalten Sie die Transparenz des Elements in IE6/7/8
if (p === "Depazität") {
var filter = elem.currentStyle.filter;
if (/oopacity/.test(Filter)) {
val = filter.match (// d /) [0] / 100;
return (val === 1 || val === 0)? Val.ToFixed (0): Val.Tofixed (1);
}
else if (val === undefiniert) {
zurück "1";
}
}
// Behandle die Situation, in der oben, rechts, unten und links automatisch sind
if (rpos.test (p) && val === "auto") {
zurück "0px";
}
Rückkehr val;
} ();
};
Hier ist ein Anrufbeispiel:
Die Codekopie lautet wie folgt:
<Styles>
.Kasten{
Breite: 500px;
Höhe: 200px;
Hintergrund:#000;
Filter: Alpha (Deckkraft = 60);
Deckkraft: 0,6;
}
</style>
<div id = "box"> </div>
<Script>
var box = document.getElementById ("Box");
alarm (GetStyle (Box, "Breite")); // "500px"
Alert (getStyle (Box, "Hintergrundfarbe")); // "RGB (0, 0, 0)" / "#000"
alarm (GetStyle (Box, "Deckkraft")); // "0,6"
ALERT (GetStyle (Box, "Float")); // "keine"
</script>