CODEWITHSUNDEEP
javascripthtmlcssresponsive-designresponsive
Jake
Jake

Reputation: 55

Set element height by the use of javascript variable

I am looking to obtain the height of a visitors viewport and then use this value to change an element's height. I have so far used Javascript to store the viewport height into a variable. I then attempted to select the elements and change the "height" style to the visitors viewport height by using the Javascript variable as the input.

The error I get is:
Uncaught TypeError: Cannot set property 'height' of undefined

My Javascript

var h = Math.max(document.documentElement.clientHeight || 0);
h = h + "px";
document.getElementsByTagName("form", "label").style.height = h;

Upvotes: 0

Views: 5614

Answers (3)

David Taiaroa
David Taiaroa

Reputation: 25495

To throw a (unrequested) CSS solution into the mix, this is very easy to achieve with plain CSS:
http://codepen.io/panchroma/pen/bgwpzz

CSS 

form, label{height:100vh;}

Upvotes: 1

Sanaz
Sanaz

Reputation: 21

var h = Math.max(document.documentElement.clientHeight || 0);
h = h + "px";

//here you have a collection of labels
var lbl = document.getElementsByTagName("label");
  for(var i=0;i<lbl.length;i++){
  lbl[i].style.height = h;
}

Upvotes: 1

GarbageCollector
GarbageCollector

Reputation: 124

As comments said, it takes only 1 string. To change the height of the label, you need to wrap it into a div, or p... Then:

 var h = Math.max(document.documentElement.clientHeight || 0);
    h = h + "px";

    var forms = document.getElementsByTagName("form");
    for(var i=0;i<form.length;i++){
    forms[i].style.height = h;
    }
    var divs = document.getElementsByTagName("div");
    for(var j=0;j<divs.length;j++){
    divs[j].style.height = h;
    }

Upvotes: 0

Related Questions