JSFiddle - React, Tailwind, and code Playground

by joneff

HTML

<div id="test1" style="width: 99.9px"></div>
<div id="test2"></div>
<div id="test3">asdadasd</div>


<div id="log"></div>

CSS

#test2 {width: 99.1px}
#test3 {float: left}
#log{clear: both}

JavaScript

function log(message) {
    $("#log").append("<p>" + message + "</p>");
}

var $test1 = $("#test1");
var $test2 = $("#test2");
var $test3 = $("#test3");


log(".width(): " +      $test1.width());
log(".css('width'): " + $test1.css("width"));
log(".style.width: " +  $test1.get(0).style.width);
log(".gcs().width: " +  window.getComputedStyle($test1.get(0)).width);
log(".offsetWidth: " +  $test1.get(0).offsetWidth);
log(".gbcr().width: " + $test1.get(0).getBoundingClientRect().width);

log("====");

log(".width(): " +      $test2.width());
log(".css('width'): " + $test2.css("width"));
log(".style.width: " +  $test2.get(0).style.width);
log(".gcs().width: " +  window.getComputedStyle($test2.get(0)).width);
log(".offsetWidth: " +  $test2.get(0).offsetWidth);
log(".gbcr().width: " + $test2.get(0).getBoundingClientRect().width);

log("====");

log(".width(): " +      $test3.width());
log(".css('width'): " + $test3.css("width"));
log(".style.width: " +  $test3.get(0).style.width);
log(".gcs().width: " +  window.getComputedStyle($test3.get(0)).width);
log(".offsetWidth: " +  $test3.get(0).offsetWidth);
log(".gbcr().width: " + $test3.get(0).getBoundingClientRect().width);