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

Answer 2

编辑：

在加粗之前添加一些额外的宽度。

$('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/

你去吧。

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

您应该尝试从一开始就为按钮设置更大的尺寸，这样当文字变粗时，尺寸不会改变。

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

4 个答案: