JQuery - changing the font of a button without changing its size

Question

When I change the font of the button font, the size will also be resized. My problem is that I cannot give the button a predefined size, so I tried to fix it with.css('width','-=4px');

But that will not work. Hope someone can help me.

HTML

<input id="b1" type="button" value="Hello world" />
<input id="b2" type="button" value="Blubba blib" />
<input id="b3" type="button" value="Bl" />
<input id="b4" type="button" value="Blubba 55" />

Js

$('input:button').click(function() {

  $('*').css('font-weight','normal');  
  $(this).css('font-weight','bold');    
  $(this).css('width','-=4px');      

});

Exmaple http://www.jsfiddle.net/V9Euk/618/

Thanks in advance! Peter

Answer 1

Edit:

Just add extra width before making it bold.

$('input:button').width(function(){
    return $(this).outerWidth() + 20;
}).click(function() {
    $(this).css('font-weight', 'bold').siblings().css('font-weight', 'normal');
});

http://www.jsfiddle.net/djhRB/

there you go.

Answer 2

, , , , . .outerWidth, .

$('input:button').click(function() {
    var w = $(this).outerWidth();

    $(this).css({
        'font-weight': 'bold',
        'width': w
    }).siblings().css({
        'width': 'auto',
        'font-weight': 'normal'
    });
});

: http://www.jsfiddle.net/CegfY/2

Answer 3

Ur

U , .

            $('*').css('font-weight', 'normal');
            $(this).css('font-weight', 'bold');
            var wdth = $(this).width();
            wdth = wdth - 4;
            $(this).css({ width: wdth+'px' });

, , .

font-wight .

.

Answer 4

, , , .