您的位置:首页 > Web前端 > JQuery

JQuery给元素动态增删类或特性

2015-07-29 22:44 681 查看
背景:通过JQuery动态给Html元素增加、删除类或属性,使Html元素在不同的时刻呈现不同的样式,给用户更好的体验感觉。

如存在以下p片段和button按钮,代码如下:

<p id="pDisplay">现在的背景颜色是白色,点击按钮以后背景变为红色</p>
<button id="changeColor">更改颜色</button>


存在如下css代码:

<style>
.colorRed{
background-color:red;
}
</style>


存在如下JS代码:

$("#changeColor").toggle(function () {
$("#pDisplay").addClass("colorRed");
},
function () {
$("#pDisplay").removeClass("colorRed");
});


如上代码,当点击按钮以后,给$("#pDisplay")元素添加或移除css类colorRed,效果如下:





同理,可应用于attr()和removeAttr(),代码如下:

//Disabled 设置元素不可用:

$(this).attr("disabled","disabled")

//移除push元素的diasble特性:

$("#push").removeAttr('disabled')
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: