obtener el ancho calculado en píxeles en Opera

¿Cómo puedo obtener el ancho calculado de un elemento en Opera? En otros navegadores puedo hacer esto:obtener el ancho calculado en píxeles en Opera

// getComputedStyle wrapper 
function getStyle(element, styleProp) { 
    return element.currentStyle ? element.currentStyle[styleProp] : 
     getComputedStyle(element, null).getPropertyValue(styleProp); 
}

... pero esto solo funciona en Opera. Devuelve "auto" para muchas cosas en lugar de un valor de píxel útil.

Aquí hay un live demo que expande un texto para que quepa en una caja. No funciona en Opera, porque el ancho calculado es auto en lugar de un valor px como en otros navegadores.

live demo in different browsers

¿Cómo puedo obtener estilos computados más útiles, como el ancho de píxel de un elemento, en Opera?

Me doy cuenta de que puedo, en este caso, usar offsetWidth en lugar de obtener el estilo calculado. Aprecio el consejo, pero el verdadero objetivo de esta pregunta es que quiero saber cómo obtener estilos computados en Opera, donde el estilo se calcula en unidades. No me importa offsetWidth a los fines de esta pregunta.

Fuente

2012-02-07 Dagg Nabbit

¿Por qué no se utiliza ningún marco para la detección de anchura y altura en diferentes navegadores? jQuery hizo esta rutina de manera fácil y elegante. Simplemente use '$ (glyph) .width()' insteed 'getStyle (glifo, 'ancho')' http://jsbin.com/ikatuc/2/edit#javascript,html,live Probado en Opera 10.63, IE6 -8, Chrome, Firefox –

También falla en IE < = 8

La razón es porque currentStyle y getComputedStyle trabajo diferente en este caso. Si estuviera probando getComputedStyle primero, sería work en Opera e IE 9-10. Opera intenta imitar IE en muchos casos (consulte innerText vs textContent), por lo que también tiene currentStyle.

PERO tenga en cuenta que perderá su comportamiento "esperado" si el elemento en cuestión tiene display:inline en su estilo (FF, Chrome, IE), porque informará "automático" para usted ... excepto ... usted lo adivinó, en Opera, que le mostrará el ancho "correcto" px del elemento.

Si desea una función de propósito generalque mejor incluyendo un general biblioteca propósito (que como se puede encontrar están llenos de casos extremos que nunca se necesita). Si tiene un propósito específico para , puede utilizar un reemplazo compatible.

El estilo calculado no es realmente útil para usted en este caso. Lo que necesita es probablemente clientWidth, offsetWidth o scrollWidth dependiendo de sus necesidades. Se diferencian principalmente en si desea incluir relleno, border, margin y/o áreas recortadas (en caso de contenido desbordado horizontalmente).

Son compatibles incluso en navegadores antiguos como IE 6, de hecho, estas propiedades fueron introducidas por primera vez por MS en la primera guerra de navegadores (al igual que innerHTML).

Puede leer más sobre ellos buscando en Google con MSDN o MDN.

Fuente

2012-02-15 15:42:50 galambalazs

El estilo calculado es útil para mí en cualquier otro navegador además de Opera. Esta pregunta se trata de cómo obtener un estilo calculado útil en Opera, no cómo solucionarlo con clientWidth. ¿Ayudaría si cambiara el ejemplo para obtener el color de la fuente o algo así? –

Muy bien, acabo de responder a su pregunta (según su título y descripción original). Si tienes un problema específico, ¿por qué preguntas otra cosa? No estoy seguro si intentas resolver un problema o solo quieres crear uno ... – galambalazs

Tengo una pregunta específica. Mi publicación original finalizó con "¿Cómo puedo obtener estilos computados más útiles, como el ancho de píxel de un elemento, en Opera?" Este es un resumen de mi pregunta. Nada ha cambiado. Quiero obtener estilos computados, no offsetWidth. –

Lo que CSS llama "valor calculado" no siempre es lo que espera. Supongo que Opera sigue la especificación al T aquí mientras los otros navegadores hacen algo que consideran más útil.

Sugiero usar element.offsetWidth en lugar de getComputedStyle() para este propósito.

Fuente

2012-02-07 09:19:43 hallvors

Hmm, quería usar métodos DOM reales, pero quizás tiene más sentido ir con 'offsetWidth' no estándar aquí. ¿Podría proporcionar un enlace a la sección relevante de la especificación que está diciendo que Opera sigue a un T? Me sorprende que sean los únicos que lo hayan hecho de esta manera si es realmente el comportamiento especificado. –

Advertencia: no soy un gurú de CSS. Sin embargo, mi comprensión de esto es que hay una distinción en CSS (ver http://www.w3.org/TR/CSS2/cascade.html para las definiciones) entre los valores "computados" y "reales", donde "se computa" puede que no siempre sea realmente un valor de píxel. Ahora bien, esto puede no especificarse con suficiente detalle como para permitirme afirmar que Opera lo hace "bien", digamos que hacemos lo que pensamos que era exactamente correcto en el momento en que se implementó, pero otros navegadores parecen estar enviando otras decisiones. ...;) – hallvors

Veo que https://developer.mozilla.org/en/CSS/computed_value indica: "La API de DOM getComputedStyle devuelve el valor utilizado, no el valor calculado". Bueno, eso lo explica :-p – hallvors

No debe haber ninguna razón para que esto tenga que ser difícil si mantiene su código bien estructurado, nunca coloque elementos de secuencia de comandos como secundarios al elemento del cuerpo aunque valide, ya que conducirá a prácticas de codificación muy pobres. Por otro lado, te felicito por usar appendChild en lugar de innerHTML no confiable, por lo que al menos estás haciendo un esfuerzo para no tomar la ruta perezosa.

Utilice una función anónima para el evento de carga para que pueda ejecutar más de una función obviamente. No estoy familiarizado con los glifos (¿SVG?), Así que no pude obtener ningún navegador para procesar el glifo en un valor que no sea 7px.

Aquí está el código reelaborado ...

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>get computed width in pixels in Opera</title> 
<script type="application/javascript"> 
//<![CDATA[ 

// getComputedStyle wrapper 
function getStyle(element, styleProp) 
{ 
return element.currentStyle ? element.currentStyle[styleProp] : getComputedStyle(element, null).getPropertyValue(styleProp); 
} 

// cheesy convenience function 
function textDiv(textContent, className) 
{ 
var tmp = document.createElement('div'); 
if (className) tmp.className = className; 
tmp.appendChild(document.createTextNode(textContent)); 
return tmp; 
} 

window.onload = function() 
{ 
var box = document.getElementById('box'),glyph = box.appendChild(textDiv('g', 'glyph')),size=500; 

glyph.style.position = 'absolute'; 
/* 
document.getElementById('status').appendChild(textDiv('Initial computed width: ' + getStyle(glyph, 'width'))); 

while (parseInt(getStyle(glyph, 'width'), 10) < 100) 
{ 
    glyph.style.fontSize = size++ + '%'; 
} 
*/ 
document.getElementById('status').appendChild(document.createTextNode(document.getElementById('box').firstChild.scrollWidth+'px')); 
} 

//]]> 
</script> 
</head> 

<body> 

<div id="status"></div> 
<div id="box"></div> 

</body> 
</html>

Fuente

2012-02-17 00:01:35 John

jsbin debe haber puesto esos elementos de script allí, solo los escribí en el panel de scripts. "Glifo" no tiene mucho sentido aquí; tenía más sentido en el código del que copié y pegué esto. Simplemente significa "símbolo" básicamente. En este caso, el símbolo es una letra G. –

Puede utilizar este código para obtener la propiedad en Opera:

document.defaultView.getComputedStyle(element,null).getPropertyValue(styleProp);

Fuente

2012-02-17 15:10:25

obtener el ancho calculado en píxeles en Opera

Respuesta

Cuestiones relacionadas