Calling JavaScript variables in CSS

Question

I know there are various threads on this topic. But I am wondering if my approach is entirely incorrect. I am trying to set the height of a wrapper depending on the browser size. So far I have this JavaScript function that returns the height and width of the screen.

<script language="JavaScript">
var screenW = 640, screenH = 480;
if (parseInt(navigator.appVersion)>3) {
 screenW = screen.width;
 screenH = screen.height;
}
else if (navigator.appName == "Netscape" 
 && parseInt(navigator.appVersion)==3
 && navigator.javaEnabled()
 ) 
{
 var jToolkit = java.awt.Toolkit.getDefaultToolkit();
 var jScreenSize = jToolkit.getScreenSize();
 screenW = jScreenSize.width;
 screenH = jScreenSize.height;
}
</script>

I wish to call the values of these variables later in : <div id="wrapper" style = "height: valuepx; screenHwidth: screenWpx;> in similar fashion to a PHP echo.

How should I be approaching calling the variable?

• Daniel A. White: you are mixing PHP, Java, JavaScript and CSS. None of this will work.
• Daniel A. White: have you considered using jQuery?
• ZenMaster: Isn't this is what CSS media-queries are for?
• Ríomhaire: Thanks for the feedback. No I have not considered it. I am new to JavaScript and CSS. What would be the best resource for me to read that should help me work this out? Thanks in advance.

Answer 1

You have to assign the style from Javascript:

var wrapper=document.getElementById("wrapper");
wrapper.style.height = screenH;
wrapper.style.width = screenW;

or with jQuery:

$("#wrapper").css({
 width:screenW, 
 height:screenH
})

• Ríomhaire: Thanks. Should inputting the first solution into my above function work if inserted correctly?