Unidades de medida no atributo style em JavaScript
Ao especificar valores de propriedades
através do atributo style, nós
devemos especificar as unidades de medida:
elem.style.width = '100px';
Ao ler os valores, eles também virão com as unidades de medida:
let width = elem.style.width;
console.log(width); // exibirá '100px';
Se necessário, podemos nos livrar
das unidades de medida usando parseInt:
let width = elem.style.width;
console.log(parseInt(width)); // exibirá 100
Se valores fracionários são esperados,
pode-se usar a função parseFloat:
let width = elem.style.width;
console.log(parseFloat(width));
É dada uma div e um botão. Ao clicar no botão,
defina a largura da div para 400px,
e a altura para 300px.
É dada uma div:
<div id="elem" style="width: 300px; height: 200px;">
text
</div>
Também é dado um botão. Ao clicar no botão, exiba a largura e a altura da div sem unidades de medida.
É dada uma div:
<div id="elem" style="font-size: 1.5em;">
text
</div>
Também é dado um botão. Ao clicar no botão, exiba o tamanho da fonte da div sem unidades de medida.