Javascript : How to get width and height of a div?
Problem :
You have a <div>
and you want to get the dimension of the <div>
such as height and width. You want to ensure that the <div>
dimension is not being tempered by third-party browser's add-ons.
How to do that?
Solution :
Imagine you have a <div id="box">
with id = box. You can get the dimension with getElementById()
function to get the offsetWidth and offsetHeight properties.
For example :
the HTML :
<div id="box">
fill up something here
the more you fill... the higher
the height will be
<br>
<br>
</div>
and the Javascript :
var element = document.getElementById('box');
var height = element.offsetHeight;
alert(height);
var width = element.offsetWidth;
//alert(width)
See demo at http://codepen.io/anon/pen/KdVXLw
IF the height or width is below certain pixels, you can either prompt alert to your website visitors or redirect them to another page.
By Adam Ng
IF you gain some knowledge or the information here solved your programming problem. Please consider donating to the less fortunate or some charities that you like. Apart from donation, planting trees, volunteering or reducing your carbon footprint will be great too.
Advertisement
Tutorials
+8.3k Golang : Implementing class(object-oriented programming style)
+7.2k Golang : How to fix html/template : "somefile" is undefined error?
+9.6k Golang : How to generate Code 39 barcode?
+12.8k Python : Convert IPv6 address to decimal and back to IPv6
+12.1k Linux : How to install driver for 600Mbps Dual Band Wifi USB Adapter
+7.7k Golang : Scan files for certain pattern and rename part of the files
+21.7k Golang : Convert string slice to struct and access with reflect example
+19.7k Golang : Append content to a file
+12.7k Swift : Convert (cast) Int or int32 value to CGFloat
+9.8k Golang : Turn string or text file into slice example
+15.8k Golang : Update database with GORM example
+9.1k nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)