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 - 在不改變其大小的情況下更改按鈕的字體重量

回答

相關問題