Is there a way (using Sass maybe) to take the measures ( width
and / or height
) of already defined elements and store them in variables to use them in calculations of other elements?
Is there a way (using Sass maybe) to take the measures ( width
and / or height
) of already defined elements and store them in variables to use them in calculations of other elements?
Have by javascript. Using jQuery you can get the size of a div
, for example, like this:
var largura = $('div#id').width();
The height:
var altura = $('div#id').height();
Using the YUI 3 framework the solution is this:
var largura, altura;
YUI().use('node', function (Y) {
largura = Y.one('div#meu-id').getComputedStyle('width');
altura = Y.one('div#meu-id').getComputedStyle('height');
});
Using JavaScript only (Chrome, Firefox, Opera, and Safari)
<style>
div#meu-id {
height: 300px;
}
</style>
<div id="meu-id">Meu conteúdo</div>
var RefDiv = document.getElementById("meu-id");
var largura = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
var altura = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
setTimeout( function() { alert('largura = ' + largura + ', altura = ' + altura); }, 5000);
I used setTimeout in case there is code that changes the content of the element and so we give some time for rendering.