que - modificar html con javascript
¿Cómo obtengo un estilo calculado? (3)
¿Puede alguien ayudarme con un guión ... o una forma de obtener el valor de
height : 1196px;
width: 284px;
de la hoja de estilo calculada (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?
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 cercano que tengo es esto
$(''#frameId'').context.lastChild.currentStyle
Eso me da el estilo real en el elemento HTML que es "automático" y eso es cierto ya que 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?
Utilizando la respuesta de Tomalaks inventé esta hermosa pieza de script para webkit
window.getComputedStyle(document.getElementById("frameId"), null).getPropertyValue("height")
o
window.getComputedStyle(document.getElementById("frameId"), null).getPropertyCSSValue("height").cssText
Resultado 150px
Idéntico a
$(''#frameId'').height();
Así que les pedí que agreguen una identificación de ''brshtml'' a la cabeza, tal vez me ayude a seleccionar el elemento más fácilmente. La inspección de Webkit ahora me muestra html # brshtml pero no puedo seleccionarlo usando getelementbyid
Vea esta respuesta .
No es jQuery pero, en Firefox, Opera y Safari puedes usar
window.getComputedStyle(element)para obtener los estilos calculados para un elemento y en IE puedes usarelement.currentStyle. Los objetos devueltos son diferentes en cada caso, y no estoy seguro de qué tan bien funcionan con los elementos y estilos creados con Javascript, pero quizás sean útiles.
El iframe parece alrededor de 150 px de alto para mí. Si su contenido es 1196px 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 navegar en el DOM del documento del iframe y aplicar la técnica anterior a ese .
mirando https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements
Use .clientWidth para obtener un ancho entero en px.
<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>
Solución jQuery:
$(".element").outerWidth( true );
//A Boolean indicating whether to include the element''s
//margin in the calculation.
Descripción : obtenga el ancho calculado actual para el primer elemento en el conjunto de elementos coincidentes, incluidos 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, solo obtendrá los rellenos como ancho total sin el ancho interno)