why do I need to set style in js initially rather than use existing style?
<p>I'm learning how to drag-and-drop-move DIV's around the document in javascript.  Here is a live demo:</p>

<p><a href="http://jsfiddle.net/BBANc/" rel="nofollow">http://jsfiddle.net/BBANc/</a></p>

<p>This works fine in Firefox and I'm not currently developing with any other browser.  However, if you change <code>set_coords_in_js</code> to <code>false</code>, the demo fails.</p>

<p>Using Firebug to set some breakpoints, you'll notice that this line fails:</p>

<pre><code>var div_left = parseInt( mov_div_1.style.left, 10 );
</code></pre>

<p>There is no value for <code>mov_div_1.style.left</code> at this point.  So javascript has no idea what the existing value is, and sets <code>div_left</code> to 'NaN'.  This style <em>is</em> set, and appears to be valid in the document, but there is no value in the DOM!</p>

<p>If you set <code>set_coords_in_js</code> back to <code>true</code>, then the above has a value and everything works perfectly as it should.</p>

<p>Why?</p>

<p>If you want to play with this locally, copy-and-paste this into your local demo file.  To see the values (or lack thereof) in Firebug, set your breakpoint on line <strong>39</strong> or <strong>40</strong> and step through, hovering your mouse over the things in the line.  Make sure you set <code>set_coords_in_js</code> to <code>false</code> to see the problem.</p>

<p><code>drag_move_div.html</code>:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;drag move div demo&lt;/title&gt;

&lt;style type='text/css'&gt;
.movDiv {
  position: absolute;
  left: 80px;
  top:  80px;
  cursor: move;
  border: 1px dashed green;
  padding: 1em;
}
.coordinates_display { font-weight: bold; }
&lt;/style&gt;

&lt;script type='text/javascript'&gt;
window.onload = function() {
  mov_div_1 = document.getElementById('mov_div_1');
  set_coords_in_js = true;

  function update_coordinates( newX, newY ) {
    document.getElementById('coordinate_x').innerHTML = newX;
    document.getElementById('coordinate_y').innerHTML = newY;
  }

  // why do I need to set these here in javascript when they are set in css?
  if( set_coords_in_js ) {
    mov_div_1.style.left = '80px';
    mov_div_1.style.top  = '80px';
  }

  update_coordinates( mov_div_1.style.left, mov_div_1.style.top );

  mov_div_1.onmousedown = function(e){
    mov_div_1.style.backgroundColor = 'black';
    mov_div_1.style.color = 'white';
    var div_left = parseInt( mov_div_1.style.left, 10 );
    var div_top  = parseInt( mov_div_1.style.top,  10 );
    var startX   = e.clientX;
    var startY   = e.clientY;
    mov_div_1.onmousemove = function(e){
      var newX = ( div_left + e.clientX - startX );
      var newY = ( div_top  + e.clientY - startY );
      mov_div_1.style.left = newX + 'px';
      mov_div_1.style.top  = newY + 'px';
      update_coordinates( mov_div_1.style.left, mov_div_1.style.top );
    };
  };

  mov_div_1.onmouseup = function(){
    mov_div_1.onmousemove = null;
    mov_div_1.style.backgroundColor = '';
    mov_div_1.style.color = '';
  };

};
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;div class='movDiv' id='mov_div_1'&gt;[ Click &amp;amp; Drag Me Around (slowly) ]&lt;/div&gt;

&lt;p&gt;Coordinates:
&lt;span id='coordinate_x' class='coordinates_display'&gt;&lt;/span&gt; x
&lt;span id='coordinate_y' class='coordinates_display'&gt;&lt;/span&gt;&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
