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.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
  <title>height/width vs. css("height")/css("width")</title>
  <style>
    body {
      font-family: monospace;
    }
    p {
      margin: 0;
    }
    div {
      height: 120px;
      width: 100px;
      padding-top: 20px;
      padding-left: 10px;
      background-color: #abc;
      border: 1px solid black;
    }
    .box {
      box-sizing: border-box;
      -moz-box-sizing: border-box;
    }
    .content {
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="content"></div>
  <script>
    (function($) {
      showDimensions('box');
      showDimensions('content');
      
      function showDimensions(cls) {
        var elm = $('.' + cls),
            label = "$('." + cls + "')";
        
        display(label + ".height() = " + elm.height());
        display(label + ".css('height') = " + elm.css('height'));
  
        display(label + ".width() = " + elm.width());
        display(label + ".css('width') = " + elm.css('width'));
      }
      
      function display(msg) {
        $("<p>").html(String(msg)).appendTo(document.body);
      }
    })(jQuery);
  </script>
</body>
</html>
 
​
 
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers