Vraag Hoe krijg ik een computergestuurde stijl?


Kan iemand me alstublieft helpen met een script ... of een manier om de waarde te krijgen

height : 1196px;
width: 284px;

van de berekende stijlpagina (webkit). Ik weet dat IE anders is - zoals gewoonlijk. Ik heb geen toegang tot het iframe (crossdomein) - ik heb alleen de hoogte / breedte nodig.

Schermafbeelding van wat ik nodig heb (in rood omcirkeld). Hoe krijg ik toegang tot die eigenschappen?

enter image description here

Bron

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

Het dichtstbijzijnde dat ik heb is dit

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

Dat geeft me de eigenlijke stijl op het HTML-element dat "automatisch" is en dat is waar omdat dat is wat is ingesteld op het iframed-document.

Hoe krijg ik de berekende stijl die alle browsers gebruiken om de schuifbalken te berekenen en de elementenwaarden te inspecteren?

Het antwoord van Tomalak gebruiken Ik heb dit prachtige stuk script voor webkit opgeroepen

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

of

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

Resultaat 150 px

Identiek aan

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

Dus ik liet ze een ID van 'brshtml' aan het hoofd toevoegen - misschien helpt het me om het element eenvoudiger te selecteren. Webkit-inspectie toont me nu html # brshtml, maar ik kan het niet selecteren met getelementbyid


28
2018-05-06 10:21


oorsprong


antwoorden:


Zien dit antwoord.

Het is geen jQuery maar in Firefox, Opera   en Safari die je kunt gebruiken    window.getComputedStyle(element) naar   verkrijg de berekende stijlen voor een element   en in IE kunt u gebruiken    element.currentStyle. De teruggekeerden   objecten zijn verschillend in elk geval,   en ik weet niet zeker hoe goed beide werken   met elementen en stijlen gemaakt met behulp van   Javascript, maar misschien zijn ze dat wel   nuttig.

De iframe lijkt ongeveer 150px hoog voor mij. Als het is inhoud zijn 1196 px hoog (en inderdaad, je lijkt de omgeving te verkennen html knoop, volgens het screenshot) en dat is wat u wilt krijgen, dan zou u dat moeten doen navigeer naar de DOM van het document van het iframe en past de bovenstaande techniek daarop toe.


35
2018-05-06 11:43



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

Gebruik .clientWidth om een ​​gehele breedte in px te krijgen.

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

9
2017-12-17 23:06



jQuery-oplossing:

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

Beschrijving: Pak de huidige berekende breedte voor het eerste element in de verzameling overeenkomende elementen, inclusief opvulling en rand. Retourneert een geheel getal (zonder "px") representatie van de waarde of null indien aangeroepen op een lege set elementen.

U kunt meer lezen over outerWidth / outerHeight op api.jquery.com

Notitie: het geselecteerde element mag niet "display: none" zijn (in dit geval krijgt u alleen de paddings als totale breedte zonder de binnenbreedte)


2
2018-01-13 09:34