我们在页面当中,经常需要跟button打交道,那么,就涉及到各种button的操作,在此写下来,供自己参考使用。
一:禁止使用button
1.直接写在<button>标签里面
<button id="btn" disabled="disabled">设置按钮不可以点击</button>
2.js禁用button
document.getElementById("btn").disabled=true;
3.使用jquery禁用button
$("#btn").attr('disabled',true);$("#btn").attr('disabled','disabled');$("#btn").prop('disabled','disabled');
二:设置禁用之后启用button
1.使用js启用button
document.getElementById("btn").disabled = true;
2.jquery启用button
$("#btn").attr('disabled',false);$("#btn").removeAttr("disabled");$("#btn").attr('disabled','');
三:button的显示与隐藏
$("#btn").show();$("#btn").hide();
四:给button设置css样式
background-color: #1AAD19;//设置背景颜色color: #FFFFFF;//设置按钮上面的字体颜色border: 1px solid #1AAD19;//设置边框的颜色cursor: pointer;//设置鼠标移动到button的样式border-radius: 3px;//设置倒角的大小,这个属性可以使得四个角有一定的角度更美观一点width: 100px;//设置按钮的宽度height: 36px;//设置按钮的高度border:none;//去掉边框background:url("static/images/reponse_add.png") no-repeat;//设置背景图片
五:设置button的click事件
$("#btn").click(function(){//do something});
六:jquery改变button的样式
1.直接css()方法进行修改样式
$("#btn").css("color","red");//改一种$("#btn").css({"color":"white","background-color":"#98bf21","font-family":"Arial","font-size":"20px","padding":"5px"});//改多种,注意里面加大括号
2.首先定义一个class的样式,然后动态的添加样式
.btnStyle{border: 1px solid #E4E8EB;border-radius: 100%;width: 36px;height: 36px;background-color: #FFFFFF;cursor: pointer;}
点击改成上面这个样式、点击移除上面这个样式。
$("#btn").click(function(){ $(this).addClass("btnStyle"); })
$("#btn").click(function(){ $(this).removeClass("btnStyle"); })
以上是我总结的一些button的常用操作,欢迎补充和优化,希望能积累更多更好的技术方法。