Question

197

Javascript variable to css

rated 0 times [ 199] [ 2] / answers: 1 / hits: 79315 / 11 Years ago, sat, may 11, 2013, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

janiajohnnad

Add To Favorites

Follow

Total Points: 146

Total Questions: 92

Total Answers: 107

Location: Faroe Islands

Member since Thu, Apr 8, 2021

3 Years ago

answered 11 Years ago jadyngraysons · Accepted Answer

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';