jQueryを使ってCSSを変更する!

 今回は、jQueryを使ってCSSを変更してみたいと思います!する作業としては2つあってまずはマウスがボタンの上に乗った時にボタンの色を変更するコードを書いてみます。


HTML

<button id=”btn” style=”color: blue;”>hover</button>



Javascript
 <div>
<script>
$(function(){
 $(‘#btn’).hover(function(){
 $(‘#btn’).css(‘background’,’black’);
})
});
</script>
</div>
 

 

$(‘ボタンのid’).hover

 マウスがボタンの上に乗ったらという指示は.hoverを使ってあげます。ここからはマウスをクリックした時にも色を変えていく作業を入れてみたいと思います!

Javascript

<div>

<script>

$(document).on(‘click’,’#btn’,function(){

 $(function(){

 var color = $(‘#btn’).css(‘color’,’black’);

 var black = $(‘#btn’).css(‘color’,’black’);

 if(color == black){

 alert(‘変更された’);

 }else{

 $(‘#btn’).css(‘background’,’green’);

 }

});

});

</script>

 </div>

 


 いかがでしたか?このif文だったら 黒 == 黒 なので(変更された)ってアラートが出そうなものですが…hoverはどうやらマウスがボタンに乗った時のみなのでボタンを押した時には黒って認識はされてないみたいですね!ぜひ、参考にしてみてください!



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です