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