JQuery - 更改按钮的字体粗细而不改变其大小

Question

当我更改按钮的字体粗细时,尺寸也会改变.我的问题是我不能给按钮预定义的大小,所以我试着修复它.css('width','-=4px');

但那不行.希望有人可以帮助我.

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');      

});

例如 http://www.jsfiddle.net/V9Euk/618/

提前致谢!
彼得

Answer 1

在使用此代码前往任何地方之前,您必须为按钮添加一些填充,以便当它们内部的文本扩展时,它们不会溢出.此代码用于.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