Siempre hay muchos problemas de compatibilidad para obtener estilos de cálculo de elementos HTML, y hay algunas diferencias entre los navegadores. Firefox y WebKit (Chrome, Safari) admiten el método estándar W3C: GetComputedStyle (), mientras que IE6/7/8 no admite el método estándar, pero tiene atributos privados para implementarlo: CurrentStyle, IE9 y Opera admiten ambos. Con estos 2 métodos y atributos, la mayoría de los requisitos se pueden cumplir básicamente.
La copia del código es la siguiente:
var getStyle = function (elem, type) {
¿Return 'GetComputedStyle' en la ventana? getComputedStyle (Elem, NULL) [Tipo]: Elem.CurrentStyle [type];
};
Sin embargo, el uso de CurrentStyle para el ancho y la altura adaptativos no pueden obtener el valor calculado, por lo que solo puede devolver automáticamente, y GetComputedStyle () puede devolver el valor calculado. Hay varias formas de resolver este problema. En lo que pensaba antes era restar el valor de relleno usando ClientWidth/ClientHeight para que el ancho y la altura calculados se puedan obtener en los navegadores que no admitan el método estándar. Hace unos días, vi a Situ Zhengmei adoptar otro método, utilizando el método GetBoundingClientRect () para obtener la posición del elemento en la página, y luego el retogo derecho a la izquierda está el ancho, el retogo de la parte superior inferior es la altura. Hice algunos cambios menores en su código, y el código final es el siguiente:
La copia del código es la siguiente:
var getStyle = function (elem, style) {
¿Return 'GetComputedStyle' en la ventana?
GetComputedStyle (Elem, NULL) [estilo]:
función(){
style = style.replace (//-(/w)/g, función ($, $ 1) {
devolución $ 1.ToUpperCase ();
});
var val = Elem.CurrentStyle [estilo];
if (val === 'Auto' && (style === "ancho" || style === "altura")) {
var rect = elem.getBoundingClientRect ();
if (style === "ancho") {
return rect.right - rect.left + 'px';
}demás{
return rect.bottom - rect.top + 'px';
}
}
devolver val;
} ();
};
// llamar a este método
var test = document.getElementById ('test'),
// Obtener el ancho calculado
twidth = getStyle (prueba, 'ancho');
Nuevo problema, si el ancho o la altura del elemento usa EM o % unidades, el valor devuelto por GetComputedStyle () cambiará automáticamente EM o % a unidades PX, y CurrentStyle no lo hará. Si el tamaño de la fuente usa EM como unidades, ¡el 0EM devuelto bajo Opera es realmente aterrador!
Más tarde, encontré algunos problemas de compatibilidad inesperados en mi uso. Hoy optimizé el código original y traté algunos problemas de compatibilidad comunes.
En JavaScript, "-" (garabatear o guión) representa un signo menos, mientras que en CSS, muchas propiedades de estilo tienen este símbolo, como el relleno-izquierda, el tamaño de la fuente, etc., por lo que si el siguiente código aparece en JavaScript, será un error:
La copia del código es la siguiente: Elem.Style.Margin---Deft = "20px";
La forma correcta de escribirlo debería ser:
La copia del código es la siguiente: elem.style.marginleft = "20px";
Aquí debe eliminar la puntuación media de CSS y capitalizar las letras que originalmente fueron seguidas por el puntaje medio, comúnmente conocido como el método de escritura de "estilo de camello". Ya sea que esté utilizando JavaScript para establecer u obtener elementos, el estilo CSS debe ser el estilo de camello. Sin embargo, muchos novatos que están familiarizados con CSS pero no están familiarizados con JavaScript siempre cometerán este error de bajo nivel. El uso del uso avanzado de Reemplazo puede simplemente reemplazar el puntaje medio en el atributo CSS con el estilo Camel.
La copia del código es la siguiente: var newProp = prop.replace (//-(/w)/g, función ($, $ 1) {
devolución $ 1.ToUpperCase ();
});
Para Float, es una palabra reservada en JavaScript. Hay otras alternativas para establecer o obtener el valor flotante del elemento en JavaScript. Es CSSFloat en navegadores estándar y Stylefloat en IE6/7/8.
Si no hay valores explícitos para la parte superior, derecha, inferior e izquierda, algunos navegadores devolverán un auto al obtener estos valores. Aunque el valor de Auto es un valor legal del atributo CSS, de ninguna manera es el resultado que queremos, pero debe ser 0px.
En IE6/7/8, para establecer la transparencia de un elemento, filtros, como: Filtro: Alpha (Opacidad = 60), para navegadores estándar, solo establece la opacidad directamente, y ambos métodos de escritura IE9 admiten, también he hecho un procesamiento de compatibilidad para obtener la transparencia de los elementos. Mientras use la opacidad, puede obtener el valor de transparencia de todos los elementos del navegador.
Obtener el ancho y la altura del elemento en IE6/7/8 se ha introducido en el artículo anterior, por lo que no lo repetiré aquí. Otra cosa a tener en cuenta es que si el estilo de un elemento se escribe en línea usando el estilo, o si el atributo de estilo se ha establecido usando JavaScript, puede usar el siguiente método para obtener el estilo calculado del elemento:
La copia del código es la siguiente:
var altura = elem.style.Height;
Este método es más rápido que leer los valores de las propiedades en GetComputedStyle o CurrentStyle, y debe usarse primero. Por supuesto, el requisito previo es que el estilo se establece a través de la escritura en línea (el uso de la configuración de JavaScript también está configurando estilos en línea). El código final optimizado es el siguiente:
La copia del código es la siguiente:
var getStyle = function (elem, p) {
var rpos = /^(izquierda | derecha | superior | fondo) $ /,
ecma = "getComputedStyle" en la ventana,
// Convierta el puntaje medio en un patrón de camello como: Padding-Left => Paddingleft
p = p.replace (//-(/w)/g, función ($, $ 1) {
devolución $ 1.ToUpperCase ();
});
// procesar flotación
P = P === "Float"? (¿ECMA? "CSSFLOAT": "stylefloat"): P;
regresar !! Elem.style [P]?
Elem.style [P]:
ECMA?
función(){
var val = getComputedStyle (Elem, null) [p];
// manejar la situación donde la parte superior, derecha, inferior e izquierda hay automáticas
if (rpos.test (p) && val === "Auto") {
devolver "0px";
}
devolver val;
} ():
función(){
var <a href = "http://wirelesscasinogames.com"> wirelesscasinogames.com </a> val = elem.currentstyle [p];
// Obtener el ancho y la altura del elemento en IE6/7/8
if ((p === "ancho" || p === "altura") && val === "auto") {
var rect = elem.getBoundingClientRect ();
return (p === "ancho"? rect.right - rect.left: rect.bottom - rect.top) "px";
}
// Obtener la transparencia del elemento en IE6/7/8
if (p === "opacidad") {
fil de var = elem.currentstyle.filter;
if (/opacity/.test(filter)) {
val = filtro.match (// d /) [0] / 100;
return (val === 1 || val === 0)? val.tofixed (0): val.tofixed (1);
}
else if (val === indefinido) {
regresar "1";
}
}
// manejar la situación donde la parte superior, derecha, inferior e izquierda hay automáticas
if (rpos.test (p) && val === "Auto") {
devolver "0px";
}
devolver val;
} ();
};
Aquí hay un ejemplo de llamada:
La copia del código es la siguiente:
<estilo>
.caja{
Ancho: 500px;
Altura: 200px;
Antecedentes:#000;
Filtro: alfa (opacidad = 60);
Opacidad: 0.6;
}
</style>
<div id = "box"> </div>
<script>
var box = document.getElementById ("box");
alerta (getStyle (caja, "ancho")); // "500px"
alerta (getStyle (caja, "color de fondo")); // "RGB (0, 0, 0)" / "#000"
alerta (getStyle (box, "opacidad")); // "0.6"
alerta (getStyle (box, "float")); // "ninguno"
</script>