JSFiddle - React, Tailwind, and code Playground

by dmethvin

HTML

<div id="main">
        <h1>Getting the CSS left property with jQuery</h1>
        <div id="yeah">The style of this DIV:
            <pre>#yeah {
    position: relative;
    margin: 3px 0;
    padding: 7px 3px;
    border: 2px solid #9ad;
    background: #cde;
}
            </pre>
        </div>
        <p>
            It is positioned relatively, but its top and left properties are not set.<br />
            On Opera, using the <tt>.css()</tt> method causes to return 8px instead of 0px.<br />
        </p>
        <div class="btnBar">
            <input type="button" value="Check the div left property" id="check" />
        </div>
    </div>

CSS

body { font: 12px 'lucida sans'; }
#main { width: 800px; margin: 40px 0; }
.btnBar { clear: both; text-align: center; margin: 10px 0; }
#yeah { position: relative; margin: 3px 0; padding: 7px 3px; border: 2px solid #9ad; background: #cde; }

JavaScript

// #6550, Opera
$(document).ready(function() {
    $('#check').click(function() {
        alert('get the "left" property with native JavaScript = ' +
            (isNaN(parseInt(document.getElementById('yeah').style.left, 10)) ? 0 : parseInt(document.getElementById('yeah').style.left, 10)) +
            ', (should be 0)\n' +
            'get the "left" property with jQuery = ' + $('#yeah').css('left') + ', (should be 0px)'
        );
    });
});