web-dev-qa-db-fra.com

Comment puis-je obtenir un style calculé?

Quelqu'un peut-il m'aider s'il vous plaît avec un script .. ou un moyen d'obtenir la valeur de

height : 1196px;
width: 284px;

à partir de la feuille de style calculée (webkit). Je sais que IE est différent, comme d'habitude. Je ne peux pas accéder à l'iframe (interdomaine) —J'ai juste besoin de la hauteur/largeur.

Capture d'écran de ce dont j'ai besoin (entouré en rouge). Comment accéder à ces propriétés?

enter image description here

La source

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

Le plus proche que j'ai

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

Cela me donne le style réel sur l'élément HTML qui est "auto" et c'est vrai, c'est ce qui est défini sur le document iframed.

Comment puis-je obtenir le style calculé que tous les navigateurs utilisent pour calculer les barres de défilement et inspecter les valeurs des éléments?

En utilisant Tomalaks answer, j'ai créé ce beau script pour webkit 

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

ou

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

Résultat 150px

Identique à 

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

Je leur ai donc demandé d'ajouter un identifiant de "brshtml" à la tête - peut-être que cela m'aidera à sélectionner l'élément plus facilement. L'inspection Webkit me montre maintenant html # brshtml mais je ne peux pas le sélectionner avec getelementbyid

javascripthtmlcsscross-domaincomputed-style
35
ppumkin

Voir cette réponse .

Ce n'est pas jQuery mais, dans Firefox, Opera et Safari, vous pouvez utiliser window.getComputedStyle(element) to obtenir les styles calculés pour un élément et dans IE, vous pouvez utiliser element.currentStyle. Le rendu les objets sont différents dans chaque cas, et je ne suis pas sûr que les deux fonctionnent bien avec des éléments et des styles créés à l'aide de Javascript, mais peut-être qu'ils seront utile.

La iframe me semble haute d'environ 150 pixels. Si ses contenus ont une hauteur de 1196 px (et, en fait, vous semblez explorer le noeud html, selon la capture d'écran) et que c'est ce que vous voulez obtenir, vous devez naviguer dans le DOM du document de l'iframe et appliquons la technique ci-dessus à cela.

41
Lightness Races in Orbit

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

Utilisez .clientWidth pour obtenir une largeur entière 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>
11
user649198

solution jQuery:

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

Description: récupère le largeur calculée actuelle pour le premier élément du jeu d'éléments correspondants, y compris les marges intérieures et les bordures. Retourne une représentation entière (sans "px") de la valeur ou null si elle est appelée sur un ensemble d'éléments vide.

Vous pouvez en savoir plus sur outerWidth / outerHeight à api.jquery.com

Remarque: l'élément sélectionné ne doit pas être "display: none" (dans ce cas, vous obtiendrez uniquement les rembourrages en tant que largeur totale sans la largeur intérieure)}

2
Sams

Si vous utilisez déjà jQuery, vous pouvez utiliser CSS pour obtenir le calcul/le courant de toute propriété de style dans n'importe quel navigateur.

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