The innerHeight and innerWidth properties

The innerHeight and innerWidth hold values for the width and height of the area of the window in view. These values do not include scroll bars, menu bars and other browser features.

var myWinWidth = window.innerWidth;
var divWidth = (myWinWidth >= 800) ? "750px" : "400px"

document.write('<div style="width: '+divWidth+'; background-color: #CCC;">');
document.write('This is the text for the new div element');
document.write('</div>');

On the first line the value of innerWidth property is assigned to a variable called myWinWidth.
On the second line the if/else statement determines if the viewer has at least 800px of viewable width or not. If yes then the div element will be 750px otherwise the it will be 400px.

The next three lines are document.write() methods. They just write the HTML part.

Leave a Reply