Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Width type test" />
<script src="//code.jquery.com/jquery-2.1.1.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="test">
  width:100px;
  height:100px;
  padding:20px;
  margin:30px;
  border: 10px solid;
  overflow: auto;
  <p class="wide"> Wide Wide Wide Wide Wide Wide Wide WideW ide
  </p>
</div>
  <p>
    width(): <span class="width"></span>
  </p>
  <p>
    innerWidth(): <span class="innerWidth"></span>
  </p>
  <p>
    outerWidth(): <span class="outerWidth"></span>
  </p>
  <p>
    outerWidth(true): <span class="outerWidthTrue"></span>
  </p>
    <p>
    clientWidth: <span class="clientWidth"></span>
  </p>
  </p>
    <p>
    offsetWidth: <span class="offsetWidth"></span>
  </p>
  <p>
    scrollWidth: <span class="scrollWidth"></span>
  </p>
</body>
</html>
Output

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

Dismiss x
public
Bin info
zhangxin840pro
0viewers