Javascript - Changing border-width without moving surrounding elements.

Answer 1

When I do this and I want that same +border -movement result, I like to do this:

function() { 
    $(this).css('borderWidth', '7px');
    $(this).css('margin', '-7px');
});

The negative margin brings everything back in.

You can also condense the styles into an object and pass them in one .css() call:

$(this).css( {borderWidth: '7px', margin: '-7px'} );

Answer 2

You could add to the padding if you subtract from the border and vice versa.

Answer 3

decrease the margin with the same amount of pixels you increase the border width with

Answer 4

Decrease the width by two times the border increase ..

 $('.Size').hover(
  function() {
      var width = parseInt($(this).css('width'));
      $(this).css('borderWidth', '5px').css({width:width-8});
  },
  function() {
      var width = parseInt($(this).css('width'));
    $(this).css('borderWidth', '1px').css({width:width+8});
  })

have a look at http://jsfiddle.net/rBrZL/

Answer 5

You can use "outline" instead of border is browser support is OK with you.

Answer 6

Yes, add a position: relative; left: -5px; to position it correctly.