Как получить вычисленный стиль?

Кто-нибудь может помочь мне с script.. или способом получить значение

height : 1196px;
width: 284px;

из вычисленной таблицы стилей (webkit). Я знаю, что IE отличается - как обычно. Я не могу получить доступ к iframe (перекрестный домен). Мне нужна высота/ширина.

Снимок экрана с тем, что мне нужно (обведен красным цветом). Как получить доступ к этим свойствам?

enter image description here

Источник

<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>

Самое близкое, что я получил, это

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

Это дает мне фактический стиль для HTML-элемента, который является "авто", и это правда, поскольку это то, что его устанавливает в iframed документе.

Как получить вычисляемый стиль, который используют все браузеры для расчета полос прокрутки, и проверить значения элементов?

Используя ответ Tomalaks, я вызвал этот прекрасный кусок script для webkit

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

или

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

Результат 150px

Идентично

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

Итак, я заставил их добавить идентификатор "brshtml" в голову - возможно, это поможет мне легче выбрать элемент. Проверка Webkit показывает мне html # brshtml, но я не могу выбрать его, используя getelementbyid

Ответы

Ответ 1

См. этот ответ.

Это не jQuery, но, в Firefox, Opera и Safari вы можете использовать window.getComputedStyle(element) до получить вычисленные стили для элемента и в IE вы можете использовать element.currentStyle. Возвращенный объекты в каждом случае разные, и я не уверен, насколько хорошо работают с элементами и стилями, созданными с использованием Javascript, но, возможно, они будут полезно.

iframe выглядит примерно на 150 пикселей выше. Если его содержимое имеет высоту 1196px (и, действительно, вы, кажется, изучаете html node, в соответствии с снимком экрана) и что вы хотите получить, тогда вы должны перейдите в DOM документа iframe и примените вышеуказанный метод к этому.

Ответ 2

смотреть https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements

Используйте .clientWidth, чтобы получить ширину целых чисел в 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>

Ответ 3

Решение jQuery:

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

Описание. Получите текущую вычисленную ширину для первого элемента в наборе согласованных элементов , включая дополнение и рамку. Возвращает целочисленное (без "px" ) представление значения или null, если вызывается в пустом наборе элементов.

Вы можете узнать больше о outerWidth/outerHeight на api.jquery.com

Примечание: выбранный элемент не должен быть "display: none" (в этом случае вы получите только прокладки как общую ширину без внутренней ширины)