How to assign JavaScript value to a CSS property?

Question

I have a div element:

<div class="page">
        //some contents
</div>

CSS:

.page{
    bottom: 0;
    color: #1f1f21;
    font-size: 17px;
    font-weight: 400;
    left: 0;
    overflow: visible;
    position: absolute;
    right: 0;
    top: 0;
}

Getting screen height with JavaScript:

var page_height = screen.height;
alert(page_height);

How can I apply this page_height value to my .page class?

(i.e) I need to set screen height to my page class

For example, if screen.height = 405

I need to add height property

height: 405px;

score 1 · Accepted Answer · answered Jan 27 '15 at 16:04

1

Use .height():

$('.page').height(page_height);

answered Jan 27 '15 at 16:04

Milind Anantwar

81,290
25
94
125

Worked :) Thank you..will accept your answer – UI_Dev Jan 27 '15 at 16:12
@UIDesigner: no idea :/ – Milind Anantwar Jan 27 '15 at 16:22

score -1 · Answer 2 · answered Jan 27 '15 at 16:04

Try this Fiddle

var page_height = screen.height;
$('.page').height(page_height)
alert(page_height);

.page{
    bottom: 0;
    color: #1f1f21;
    font-size: 17px;
    font-weight: 400;
    left: 0;
    overflow: visible;
    position: absolute;
    right: 0;
    top: 0;
    width:500px;
    background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="page">
        //some contents
</div>

How to assign JavaScript value to a CSS property?

2 Answers2