Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id='container'>
    I am an empty div container !!
    I contain nothing..Please drop some change ;)
  </div>
</body>
</html>
 
#container {
  width: 20rem;
  background-color: lightGreen;
  border: 2px solid green;
  padding: 2px;
  line-height: 1.5rem;
}
 
var $c = $('#container');
console.log($c.width());
​
var c = document.getElementById('container');
​
// Q1. Why is it different from above one. This is 324 while earlier it was 320. See the output.
console.log(c.clientWidth);
​
// Q2. How to update the code to increase the width by 10rem.
$c.css({width: $c.width() + 10});
​
console.log($c.width());
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
blunderboypro
0viewers