¿Cómo obtengo un estilo calculado?

Puede alguien por favor me ayude con un guión .. o una manera de obtener el valor de¿Cómo obtengo un estilo calculado?

height : 1196px; 
width: 284px;

de la hoja de estilo computarizada (WebKit). Sé que IE es diferente, como de costumbre. No puedo acceder al iframe (dominio cruzado). Solo necesito el alto/ancho.

Captura de pantalla de lo que necesito (marcado con un círculo en rojo). ¿Cómo accedo a esas propiedades?

enter image description here

Fuente

<iframe id="frameId" src="anotherdomain\brsstart.htm"> 
<html id="brshtml" xmlns="http://www.w3.org/1999/xhtml"> 
    \--I WANT THIS ELEMENTS COMPUTED BROWSER CSS HEIGHT/WIDTH 

<head> 
<title>Untitled Page</title> 
</head> 

<body> 
BLA BLA BLA STUFF 

</body> 

</html> 
    \--- $('#frameId').context.lastChild.currentStyle 
     *This gets the actual original style set on the other domain which is "auto" 
     *Now how to getComputed Style? 


</iframe>

Lo más cerca que lo que tengo es esta

$('#frameId').context.lastChild.currentStyle

que me da el estilo actual en el elemento HTML que es "auto" y que es cierto eso es lo que está configurado en el documento iframed.

¿Cómo obtengo el estilo calculado que usan todos los navegadores para calcular las barras de desplazamiento e inspeccionar los valores de los elementos?

Usando respuesta Tomalaks conjuré esta hermosa pieza de escritura para webkit

window.getComputedStyle(document.getElementById("frameId"), null).getPropertyValue("height")

window.getComputedStyle(document.getElementById("frameId"), null).getPropertyCSSValue("height").cssText

Resultado 150px

Idéntico al

$('#frameId').height();

Así Les pedí que agreguen una identificación de 'brshtml' a la cabeza, tal vez me ayude a seleccionar el elemento más fácilmente. Webkit inspection me muestra ahora html # brshtml pero no puedo seleccionarlo usando getelementbyid

Fuente

2011-05-06 ppumkin

Mire en la sección "relacionada" de esta página ... –

Parece que es posible que desee usar las propiedades element.offsetWidth y element.offsetHeight, pero en realidad es difícil decir lo que realmente querer de tu publicación – Jakub

¿Se puede usar jQuery? –

Ver this answer.

No es jQuery, pero, en Firefox, Opera y Safari puede utilizar window.getComputedStyle(element) a obtener los estilos calculados para un elemento y en IE puede utilizar element.currentStyle. Los objetos devueltos son diferentes en cada caso, y no estoy seguro de qué tan bien funcionan con elementos y estilos creados usando Javascript, pero quizás serán útiles.

El iframe se ve aproximadamente 150px de alto para mí. Si su contenido tiene 1196px de alto (y de hecho, parece que está explorando el nodo html, de acuerdo con la captura de pantalla) y eso es lo que desea obtener, entonces debe navigate into the DOM of the iframe's document y aplicar la técnica anterior a eso.

Fuente

2011-05-06 11:43:04

¡Gracias! Probé depuración de Chrome de esta manera y esta es la ventana de error window.getComputedStyle (document.getElementById ("frameId"), null) .getPropertyValue ("height"): 150px Debe ser 1196px Me está volviendo mental – ppumkin

En su captura de pantalla, el 'iframe' _does_ parece tener unos 150 px de alto. El bit rojo en un círculo indica que el elemento 'html' es 1196px. ¿Quiso aventurarse en el DOM del 'iframe'? –

En IE puede usar la propiedad 'element.currentStyle'. – geekchic

mirando https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements

Uso .clientWidth para obtener un ancho entero en px. solución

<div id="mydiv" style="border:1px solid red;">This is DIV contents.</div> 
<button onclick="alert(
document.getElementById('mydiv').clientWidth);"> 
    Click me to see DIV width in px 
</button>

Fuente

2012-12-17 23:06:31

que devuelve el tamaño de la trama no la página interna. ¿Por qué? Debido a la Cruz Reglas del sitio deniying acceso a la página de "cliente" para que caiga de nuevo a la iFrame- el depurador vuelve a renderizar el código HTML y no utiliza ningún tipo de API para obtener el ancho cliente actrual. Así que su respuesta es incorrecta en muchos sentidos. es sólo que no quiero votar por un novato – ppumkin

@ppumkin Esto hace exactamente lo mismo que el ancho cuando se trata de dIV. Dunno sobre marcos [i]. ¿Tienes un enlace a algunos documentos o algo así? Gracias. –

jQuery:

$(".element").outerWidth(true); 
//A Boolean indicating whether to include the element's 
//margin in the calculation.

Descripción: Obtener la corriente anchura computarizada para el primer elemento en el conjunto de elementos emparejados, incluido el relleno y el borde. Devuelve un entero (sin "px") representación del valor o nulo si se invoca en un conjunto vacío de elementos.

Puede leer más sobre outerWidth/outerHeight en api.jquery.com

Nota: el elemento seleccionado no debe ser "display: none" (en este caso obtendrá sólo los rellenos como Total ancho sin el ancho interior)

Fuente

2014-01-13 09:34:36 Sams

¿Cómo obtengo un estilo calculado?

Respuesta

Cuestiones relacionadas