Javascript variable to css

Question

I am working on a small html page. I am using javascript to get the dimensions of the screen. I need to pass that variable to a css style like below. How can I do this? Also I notice that I need to put the "px" at the end of the value, like top: 100px not top:100. How can I add that to my variable as well? Thanks for any help

<script type="text/javascript">
 var percent =1;
 var myWidth = Math.round( screen.width * percent);
 var myHeight = Math.round( screen.height * percent);
</script>
<style type="text/css">
 div.content {
margin: auto;
top: myHeight ;
width: myWidth ;
 }
</style>

• theaccordance: Any particular reason you can't use percentages in your style ruleset?
• Costa Michailidis: Media Queries might also be useful. What are you trying to achieve on what type of screen? Smartphone, desktop?

Answer 1

If you intend to use LESS CSS you can try out this :

 @percent: 1;
 @height: `Math.round( screen.height * @{percent})`;
 @width: `Math.round( screen.width * @{percent})`;
 div.content {
 margin: auto;
 top: @height;
 width: @width;
 }

If you intend to use JQUERY you can try out this :

var percent=1;
$("div.content").css('top', Math.round( screen.height * percent)+'px');
$("div.content").width(Math.round( screen.width * percent));

If you intend to use JS you can try out this :

var percent=1;
document.querySelector('div.content').style.top = Math.round( screen.height * percent)+'px';
document.querySelector('div.content').style.width = Math.round( screen.width * percent)+'px';

• fghajhe: All great responses. Thanks, I will use JQuery

Answer 2

With pure JS, you could get all div via getElementsByTagName, then filter for a content class name.

For newer browsers (most especially for IE):

• You could also do getElementsByClassName, then filter all those that are divs.
• You could use querySelectorAll which directly returns a list of matches.

Then for each that match, do:

currentDiv.style.top = myHeight;
currentDiv.style.width = myWidth;

Answer 3

var myCss = "div.content { margin: auto; top: " + 
 myHeight + "; width: " + myWidth + " ; }";
var myStyle = document.createElement('style');
myStyle.type = 'text/css';
myStyle.styleSheet ? myStyle.styleSheet.cssText = myCss : 
 myStyle.appendChild(document.createTextNode(myCss));
document.getElementsByTagName("head")[0].appendChild(myStyle);

This creates the style element that you have described and appends it to the head of the document, applying it.

Answer 4

jQuery works with all browsers, even Internet Explorer, but you need jQuery. The JavaScript works with all browsers, except for Internet Explorer. Alternative you could use pure CSS, which works when JavaScript is disabled. Try whichever works best :).

JavaScript

var width = body.offsetWidth;
var height = body.offsetHeight;
var _content = document.querySelectorAll(".content");
content.style.width = width + "px";
content.style.height = height + "px";

Or jQuery

var width = $(document).width();
var height = $(document).height();
var _content = $('.class');
content.style.width = width + "px";
content.style.height = height + "px";

Or CSS

.content {
 margin:auto;
 top:100%;
 width:100%;
}

Answer 5

Also you could consider using something like LESS Not sure if this is an option for you or not.