wake-up-neo.net

Wie bekomme ich einen berechneten Stil?

Kann mir jemand bitte mit einem Skript helfen .. oder einen Weg, um den Wert von zu erhalten

height : 1196px;
width: 284px;

aus dem berechneten Stylesheet (Webkit). Ich weiß IE ist anders als üblich. Ich kann nicht auf den iframe (domänenübergreifend) zugreifen. Ich brauche nur die Höhe/Breite.

Screenshot von dem, was ich brauche (rot eingekreist). Wie kann ich auf diese Eigenschaften zugreifen?

enter image description here

Quelle

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

Das nächste, was ich habe, ist dies

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

Das gibt mir den tatsächlichen Stil des HTML-Elements, das "auto" ist, und das ist wahr, da dies im iframed-Dokument festgelegt ist.

Wie erhalte ich den berechneten Stil, den alle Browser zum Berechnen der Bildlaufleisten und zum Untersuchen von Elementwerten verwenden?

Mit Tomalaks Antwort beschwor ich dieses schöne Skript für das Webkit 

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

oder

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

Ergebnis 150px

Identisch mit 

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

Also habe ich sie dazu gebracht, dem Kopf eine ID von 'brshtml' hinzuzufügen - vielleicht hilft es mir, das Element einfacher auszuwählen. Die Webkit-Überprüfung zeigt mir jetzt html # brshtml, aber ich kann es nicht mit getelementbyid auswählen.

35
ppumkin

Siehe diese Antwort .

Es ist nicht jQuery, aber in Firefox Opera und Safari können Sie .__ verwenden. window.getComputedStyle(element) an Liefert die berechneten Stile für ein Element und in IE können Sie .__ verwenden. element.currentStyle. Das zurückgegebene Objekte sind jeweils unterschiedlich, und ich bin mir nicht sicher, wie gut beide funktionieren. mit Elementen und Stilen, die mit .__ erstellt wurden. Javascript, aber vielleicht werden sie sinnvoll.

Der iframe sieht für mich um 150px hoch aus. Wenn sein contents 1196px hoch ist (und Sie tatsächlich den Knoten html gemäß dem Screenshot erkunden), und das ist, was Sie wollen, dann sollten Sie navigieren Sie in das DOM des iframe-Dokuments und wende die obige Technik darauf an.

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

Verwenden Sie .clientWidth, um eine ganzzahlige Breite in px zu erhalten.

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

jQuery-Lösung:

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

Description: Ruft die aktuell berechnete Breite für das erste Element in der Menge der übereinstimmenden Elemente ab, einschließlich Auffüllen und Rand. Gibt eine Ganzzahl (ohne "px") des Werts oder Null zurück, wenn sie für eine leere Menge von Elementen aufgerufen wird.

Weitere Informationen zu outerWidth / outerHeight finden Sie unter api.jquery.com

Hinweis: Das ausgewählte Element darf nicht "display: none" sein (in diesem Fall erhalten Sie nur die Auffüllungen als Gesamtbreite ohne Innenbreite.)

2
Sams

Wenn Sie verwenden bereits jQuery. Mit CSS können Sie das berechnete/current für jede Stileigenschaft in einem beliebigen Browser abrufen.

$("#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>

0
KyleMit