700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > jquery禁用 启用button以及button的样式操作

jquery禁用 启用button以及button的样式操作

时间:2021-07-11 02:03:10

相关推荐

jquery禁用 启用button以及button的样式操作

我们在页面当中,经常需要跟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的常用操作,欢迎补充和优化,希望能积累更多更好的技术方法。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。