Get Width and Height -Inner and Outer for HTML element

Tue Jan 01, 2013 12:40 am

Get inner and outer HTML element width and height, also get the document width and height.
javascript code

<html>
<head>
<title>Get Width,Height,Inner Outer Height,Width,</title>

<!--
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
 Note you can download the JQuery package instead of using Google version. --> 
<script src="jquery-1.8.3.js"></script>
<script>
 
$(document).ready(function(){
  $("button#b1").click(function(){
    var info="";
    //Show Width/Height   for first Div1
    info="Div Width="+$("div#d1").width()+" Div Height="+$("div#d1").height()+" <br/>";
    //Show Width/Height  with padding for first Div1
    info+="Div Width(With Padding)="+$("div#d1").innerWidth()+
    " Div Height(With Padding)="+$("div#d1").innerHeight();
     //Show Width/Height  with padding and Border width for first Div1
    info+="<br/>Div Width(With Padding&Border)="+$("div#d1").outerWidth()+
    " Div Height(With Padding&Border)="+$("div#d1").outerHeight();
         //Show Width/Height  with padding , Border width and margin for first Div1
  info+="<br/>Div Width(With Padding,Border&Margin)="+$("div#d1").outerWidth(true)+
    " Div Height(With Padding,Border&Margin)="+$("div#d1").outerHeight(true);
    $("div#d2").html(info);
  });
  
  
    $("button#b2").click(function(){
    var info="";
    //Show Width/Height   for document
    info="Current document Width="+$(document).width()+" Div Height="+$(document).height()+" <br/>";
 
    $("div#d3").html(info);
  });
  
   
  
});
</script>
<style type="text/css">
.class1
{
font-size:xx-large;
font-weight:bold;
color:red;
background:#61E311;
padding:2px;
margin:2px;
height:200px;
width:210px;
text-align:center;
text-decoration: underline;
border: 1px solid;
}
 
 


</style>
</head>
<body>

<div id="d1"  class="class1">This Text is inside the Div</div>
<div id="d2" ></div>
<div id="d3" ></div> 
<br>
<button  id="b1">Show Width/Height Info for first Div1</button>
 <button  id="b2">Show Information about Current Document</button>
 
</body>
</html>

Get Width and Height -Inner and Outer for HTML element

Get Width and Height -Inner and Outer for HTML element

Topic Tags