Как мне получить компьютерный стиль? - PullRequest
Новая
       20

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

38 голосов
/ 06 мая 2011

Может кто-нибудь помочь мне с сценарием .. или способ получить значение 

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, я создал этот прекрасный скрипт для 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

Ответы [ 4 ]

42 голосов
/ 06 мая 2011

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

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

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

11 голосов
/ 18 декабря 2012

глядя на https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements

Используйте .clientWidth , чтобы получить целую ширину в пикселях. 

<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>
2 голосов
/ 13 января 2014

Решение jQuery: 

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

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

Подробнее о outerWidth / outerHeight можно узнать на сайте api.jquery.com

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

0 голосов
/ 04 ноября 2018

Если вы уже используете jQuery, вы можете использовать CSS для получения вычисленного / текущего для любого свойства стиля в любом браузере. 

$("#el").css("display")


var $el = $("#el");

console.log(".css('display'): " + $el.css("display"))

var el = document.getElementById("el");
el.currentStyle = el.currentStyle || el.style

console.log("style.display: " + el.style.display)
console.log("currentStyle.display: " + el.currentStyle.display)
console.log("window.getComputedStyle: " + window.getComputedStyle(el).display)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="el">element</div>
...