button.js中的按钮背景颜色

问题描述：

所以我试图编辑单击按钮时的颜色。这里是我的HTML和JavaScriptbutton.js中的按钮背景颜色

HTML：

<button type="submit" class="btn" id="hello-1" value="hello">Submit</button>

这里是我的JS：

//Name:buttons.js 
//Created by: Jonathan 
//Created on: 25/09/15. 

'use stict'; 

$(document).ready(function(){ 
    $('hello-1').click(function(){ 
     document.getElementById('hello-1').style.background = "linear-gradient(#337AB7,#215480)"; 
    }); 
});

我不明白为什么它不工作。任何帮助？

只需添加一个＃因为它的ID。 – Manu

答

您的选择是错误的。当您通过编号jQuery选择了一个元素时，您必须在ID之前添加#字符。

所以不是$('hello-1')使用$('#hello-1')

$(document).ready(function() { 
    $('#hello-1').click(function() { 
     document.getElementById('hello-1').style.background = "linear-gradient(#337AB7,#215480)"; 
    }); 
});

编辑：

而且当你单击事件处理程序中，你不需要再次选择元素，因为this将指向您的事件处理程序的目标元素可以如下所示：

$(document).ready(function() { 
    $('hello-1').click(function() { 
     this.style.background = "linear-gradient(#337AB7,#215480)"; 
    }); 
});

答

如果你使用jQuery，为什么不用它来改变css？你也错过了＃。

$(document).ready(function(){ 
    var $button = $('#hello-1'); 
    $button.click(function(){ 
     $button.css('background', "linear-gradient(#337AB7,#215480)"); 
    }); 
});

button.js中的按钮背景颜色

相关推荐