CodesJava

Easy learning with example program codes

jQuery innerWidth()


jQuery innerWidth() method returns the inner width of the selected element. Padding is included in this method but not border and margin.

Syntax:

$(selector).innerWidth()  

Example 1

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
	$("button").click(function(){  
      	alert("Inner width of the div is: " + $("div").innerWidth());  
	});  
});  
</script>  
</head>  
<body>  
<div style="height:100px;width:500px;padding:5px;margin:3px;border:1px solid blue;background-color:lightpink;"></div><br>  
<button>Width</button>  
</body>  
</html>

Try it

JS Bin on jsbin.com

Example 2

<!DOCTYPE html>  
<html>  
<head>  
<style>  
  div {  
	width: 60px;  
  	padding: 10px;  
  	height: 100px;  
  	float: left;  
  	margin: 5px;  
  	background: orange;  
  	cursor: pointer;
  }  
  .mod {  
	background: turquoise;  
	cursor: default;  
  }  
  </style>  
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
</head>  
<body>  
<div>Thick</div>  
<div>Thin</div>  
<div>Thinner</div>  
<div>Thinnest</div>  
 
 
<script>  
var modwidth = 100;  
$( "div" ).one( "click", function() {  
  $( this ).innerWidth( modwidth ).addClass( "mod" );  
  modwidth -= 10;  
});  
</script>  
</body>  
</html>

Try it

JS Bin on jsbin.com

Sign Up/ Sign In
Ask a Question


Copyright © 2018 CodesJava DMCA.com Protection Status SiteMap Reference: Java Wiki