Lo que quiero es pillar la altura total de la pagina y aplicarle un CSS dependiendo del resultado.
JS:
$altura = document.body.scrollHeight;
CSS:
#id{
height: $altura;
}
Algo así, como se debería hacer?
La altura total de la página en CSS es 100vh
y el ancho es 100vw
Actualmente no se pueden pasar variables de JS a CSS
Solución:
#id {
height: 100vh;
}
Pd: Cuanto menos uses el JS, mejor para el WPO de tu web
Puedes aplicar el css
desde Javascript. Por ejemplo, usando querySelector
(también es posible de otra forma en caso de incompatibilidad, ya que querySelector no es compatible con navegadores antiguos [ver especificaciones en el enlace]).
//Usamos parseInt para quitar las letras como px
var paginaAltura = parseInt(window.getComputedStyle(document.querySelector("body")).height);
console.log("Altura inicial body: " + paginaAltura);
var paginaAlturaNew = parseInt((paginaAltura + 100));
console.log("Nueva altura body: " + paginaAlturaNew);
document.querySelector('body').style.height = paginaAlturaNew + "px";
console.log("Altura final del body : " + window.getComputedStyle(document.querySelector("body")).height);
// Con un div
var divAltura = parseInt(window.getComputedStyle(document.querySelector("#test")).height);
console.log("Altura inicial div: " + divAltura);
var divAlturaNew = parseInt((divAltura + 100));
console.log("Nueva altura div: " + divAlturaNew);
document.querySelector('#test').style.height = divAlturaNew + "px";
console.log("Altura final del div : " + window.getComputedStyle(document.querySelector("#test")).height);
body {
height: 100px;
}
#test {
height: 10px;
}
<body>
<div id="test">
<p>Lorem ipsum dolor sit amet</p>
</div>
</body>
De la manera que lo planteas no podria hacerse, pero puedes hacerlo asi:
Considerando alto del documento:
document.getElementById("id").style.height = document.documentElement.scrollHeight+"px"
considerando alto del body:
document.getElementById("id").style.height = document.body.scrollHeight+"px"
Puedes utilizar Jquery para facilitarte la vida. https://jquery.com/
Una vez cargado jquery puedes utilizar la sentencia:
$(function(){
var windowHeight = $(window).height();
console.log(windowHeight)
});
con esto podrás modificar a tu antojo las propiedades del la ventana como por ejemplo:
$(function(){
$(document).css({ "background": "chartreuse" });
});