使用JQuery更改HTML按鈕圖像導致樣式問題

我有一個標準的HTML按鈕，當按下時觸發一些Ajax。我正在使用JQuery來禁用按鈕，並在等待返回時顯示進度GIF。使用JQuery更改HTML按鈕圖像導致樣式問題

由於某種原因，設置按鈕的背景圖像會導致其失去其他樣式並與其鄰居不一致。

我試過用div封裝它，設置各種邊距和位置，我無法使它工作。

有什麼建議嗎？

僅供參考：如果更容易，我可以使用<input>而不是<button>。

破碎：

修正：

代碼：

var mybutton = $('#MyButton'); 
 

 
if (mybutton) 
 
{ 
 
    mybutton.click(function() { 
 

 
     // Disable 
 
     mybutton.prop('disabled', true); 
 
     
 
     // Hide text 
 
     mybutton.html(''); 
 
     
 
     // Set image 
 
     mybutton.css("background", "url('http://lorempixel.com/32/32/') no-repeat 32px center"); 
 
     
 
     // Wait 5 seconds to simulate slow Ajax return 
 
     setTimeout(continueExecution, 3000); 
 
    }); 
 
}; 
 

 
function continueExecution() 
 
{ 
 
    // Reset button back to normal 
 
    mybutton.html('Check'); 
 
    mybutton.css("background", ""); 
 
    mybutton.prop('disabled', false); 
 
};

#Label_Guid{ 
 
font-size: 20px; 
 
} 
 
#Textbox_Guid{ 
 
    width: 200px; 
 
    height: 30px; 
 
    margin-left: 5px; 
 
    margin-right: 5px; 
 
} 
 
#MyButton{ 
 
    height: 40px; 
 
    width: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id="Label_Guid">GUID:</span> 
 
<input id="Textbox_Guid" type="text" name="guid"> 
 
<button id="MyButton">Check</button>

來源

2015-11-27 Equalsk

你需要做的唯一的事情是CSS添加到您的按鈕：

vertical-align: middle;

您的問題未從背景圖像的到來，或禁用，這是因爲有按鈕中沒有內容。沒有內容，默認的垂直對齊正在改變其位置。

來源

2015-11-27 17:01:49

哦，我明白了，因此將按鈕文本設置爲空格也可以。天才。爲什麼總是需要一行簡單的代碼！？謝謝:-) – Equalsk

關於背景顏色的任何想法？我認爲設置圖像防止所有其他繪畫，使按鈕變白/透明。 – Equalsk

你對背景顏色是正確的。任何時候你只能有一個背景元素，所以它會忽略所有按鈕的標準背景樣式，因爲你的圖像。把一個div放在按鈕裏面，{height：100％;}，然後把背景圖片應用到div上，而你應該在路上。 –

使用JQuery更改HTML按鈕圖像導致樣式問題

回答

相關問題