Tem algum meio (usando Sass talvez) de pegar as medidas (width
e/ou height
) de elementos já definidos e armazená-las em variáveis pra usá-las em cálculos de outros elementos?
-
2Eu acredito que a lógica seja a inversa: crie variáveis, e aí use para definir as medidas de todos os elementos.– bfavaretto ♦11/02/2014 às 23:49
2 Respostas
Tem por javascript. Utilizando jQuery você pode pegar o tamanho de uma div
, por exemplo, assim:
var largura = $('div#id').width();
A altura:
var altura = $('div#id').height();
Usando o framework YUI 3 a solução é essa:
var largura, altura;
YUI().use('node', function (Y) {
largura = Y.one('div#meu-id').getComputedStyle('width');
altura = Y.one('div#meu-id').getComputedStyle('height');
});
Usando apenas JavaScript (Chrome, Firefox, Opera e 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);
Usei o setTimeout para o caso de haver código que altere o conteúdo do elemento e assim damos um tempo para renderização.