Similar Post:
Avoiding repeated constants in CSS
I am currently working on a javascript file that aims to adjust my site's resolution based on the width and height of the viewport. While I have successfully retrieved these values using JavaScript, I am facing challenges in sending them to my CSS variables efficiently. Is there a way to achieve this seamlessly? Below is an excerpt from my JavaScript code:
<script type="text/javascript>
<!--
var viewportwidth;
var viewportheight;
// Standard compliant browsers (Mozilla/Netscape/Opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
//-->
</script>
In terms of CSS, my attempt at quickly integrating the JavaScript-derived values has not been successful:
@variables{
ViewWidth:'+viewportwidth+';}
@variables{
ViewHeight:'+viewportheight+';}
html{
max-width: var(ViewWidth);
max-height: var(ViewHeight);}
It seems like there might be an error in the syntax of the variable declarations. I structured it this way to indicate my objective of passing JavaScript variable values to CSS smoothly.