使用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按钮图像导致样式问题

回答

相关问题