Get width of element with jquery when using border-box

So when using border-box there is no actual width property, so I can't get it through:

$("#my_id").width()

nor

.outerWidth()

nor anything else My guesses are that it has to be calculated through pixels, I dunno, seems too complicated, there must be an easier way.

Thanks!

P.S. - Using bootstrap - Using jquery (obviously right?)

Answers


This demo rule out that jQuery doesn't give width. It gives.

$(document).ready(function(){

var beforeBorderBox = $('.holly-molly').outerWidth();
$('.holly-molly').append('<p>beforeBorderBox:'+ beforeBorderBox + '</p>');
var afterBorderBox = $('.holly-molly').css('box-sizing', 'border-box').outerWidth();

$('.holly-molly').append('<p>afterBorderBox:'+ afterBorderBox + '</p>');

});
.holly-molly {
  background: tomato;
  min-height: 80px;
  text-align: center;
  color: #fff;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holly-molly">
  <span>Holly Molly</span>
</div>

We should get actual element's with by using $("#my_id").width(). If you want to include padding too(excluding border), then you can use $("#my_id").innerWidth(). If you want to include margin also, then you can use $(#my_id').outerWidth(true))


Need Your Help

Java fuzzy String matching with names

java string levenshtein-distance

I've got a stand-alone CSV data loading process that I coded in Java that has to use some fuzzy string matching. It's definitely not ideal, but I don't have much choice. I am matching using a first...

iOS simulator showing black on 3/4 of screen

ios xcode simulator

I tried several apps running in fresh install (yosemite) of Xcode 6.3 simulator but all of them displays only on first 1/4 of simulator screen.