screen_w = window.innerWidth;
screen_h = window.innerHeight;
I am trying to retrieve the dimensions of the window and store them in variables. Is there a way to then use these variables in my CSS styles?
For example:
img
{
width: screen_w;
height: screen_h;
}
I have attempted
<script type="text/javascript">
<style>
img..
</style>
</script>
but it does not seem to work. Is this even possible, or is there another method for passing a variable?
Thanks in advance.
///Added
The link below -----v
suggests creating a node that represents your style
<script type="text/javascript">
var head = document.getElementsByTagName('head')[0],
style = document.createElement('style'),
rules = document.createNode('img { width: screen_w; height: screen_h; }');
style.type = 'text/css';
if(style.styleSheet)
style.styleSheet.cssText = rules.nodeValue;
else style.appendChild(rules);
head.appendChild(style);
</script>
then in my HTML I just need to insert my image.
<img src="slide1.jpg">
but somehow it still does not pass through properly.
However, I can get the "document.getElementById" to work. Is there a way to do this without a button, like using onLoad()?
function changeSize()
{
document.getElementById("picture").height= screen_h;
document.getElementById("picture").width= screen_w;
}
</script>
</head>
<body>
<img id="picture" src="slide1.jpg" width="300" height="98" />
<br /><br />
<input type="button" onclick="changeSize()" value="Change size of image" />