JQuery - 在不改变其大小的情况下更改按钮的字体重量

当我更改按钮的字体权重时，大小也会更改。我的问题是，我不能给按钮预定义的大小，所以我试图用.css('width','-=4px');JQuery - 在不改变其大小的情况下更改按钮的字体重量

修复它但这不起作用。希望有人能帮助我。

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" />

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

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

});

〔实施例 http://www.jsfiddle.net/V9Euk/618/

提前感谢！
Peter

来源

2010-09-24 Peter

编辑：

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

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

你去那里。

来源

2010-09-24 08:06:22 Stefanvds

嗨Stefanvds，你的解决方案没有工作:( - > http://www.jsfiddle.net/V9Euk/626/ – Peter 2010-09-24 08:19:01

很好，非常感谢你太多了！ – Peter 2010-09-25 12:05:50

我看到你在那里做了什么 - 但是不，它并不是使它们保持其大小的额外宽度 - 这是事实上，你将它们分配给一个固定的宽度，如果你移除了“+ 20px”，它将起作用基本上我的解决方案，但更好（虽然不太灵活，如果你想动态改变按钮的内容），所以+1。我也在更新你的解决方案，以提高效率，希望你不会介意 – 2010-09-25 12:37:56

您应该尝试从一开始就为您的按钮设置更大的尺寸，以便文本变粗体时尺寸不会改变。

来源

2010-09-24 08:04:12

你能给我的jsfiddle〔实施例吗？ – Peter 2010-09-24 08:20:08

Here：http://www.jsfiddle.net/V9Euk/630/ – 2010-09-24 08:26:23

我乌尔问题

和U可以找出像波纹管是按键的按键和减少宽度的宽度。

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

所以当你会点击按钮，它会找到的按钮的宽度和宽度减小。

最终您可以检查font-wight属性并根据您的要求交替减少或增加。

此外，你可以使大小百分比来实现。

来源

2010-09-24 09:16:39

在用这段代码去任何地方之前，你必须给按钮一些填充，这样当内部文本展开时，它们不会溢出。此代码使用.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

来源

2010-09-24 09:16:48

就是这样！感谢毅江！ – Peter 2010-09-24 09:41:56

JQuery - 在不改变其大小的情况下更改按钮的字体重量

回答

相关问题