Total members 11889 |It is currently Fri Mar 29, 2024 11:05 am Login / Join Codemiles

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka





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>




_________________
M. S. Rakha, Ph.D.
Queen's University
Canada


Author:
Mastermind
User avatar Posts: 2715
Have thanks: 74 time
Post new topic Reply to topic  [ 1 post ] 

  Related Posts  to : Get Width and Height -Inner and Outer for HTML element
 Control HR tag width and height     -  
 draws a big image scaled to its width-height as specified     -  
 Change Image File Size (Height And Width) While Uploading     -  
 Change and get html content of element     -  
 opacity of HTML element- transparent     -  
 Get the position of HTML element using JQuery     -  
 How to make html element hidden using CSS     -  
 removing focus border from a HTML element     -  
 Remove HTML element or Delete its content     -  
 Show hint when focus on html element using JQuery     -  



Topic Tags

JQuery Content






Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com