动态追加的html修改样式,jQuery动态追加和移除CSS样式的方法

jQuery动态追加和移除CSS样式的方法

发布时间：2020-06-23 10:26:37

来源：亿速云

阅读：119

作者：Leah

这篇文章将为大家详细讲解有关jQuery动态追加和移除CSS样式的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

有两个CSS样式操作方法，一个是追加样式addClass，一个是移除样式removeClass，下面通过一个实例讲解用法。

jQuery动态添加删除CSS样式

$(document).ready(function () {

$("#btn1").click(function() {

$('#txtContent').addClass('red'); //追加样式

});

$("#btn2").click(function() {

$('#txtContent').removeClass('red'); //移除样式

});

$("#btn3").click(function() {

$('#txtContent').addClass('red weight family'); //追加多个样式

});

$("#btn4").click(function() {

$('#txtContent').removeClass('red weight'); //移除多个样式

});

$("#btn5").click(function() {

$('#txtContent').removeClass(); //移除所有样式

});

});

.default {

font-size: 30px;

}

.red {

color: red;

}

.weight {

font-weight: bold;

}

.family {

font-family: "华文隶书"

}

你好呀！jQuery基础知识！

关于jQuery动态追加和移除CSS样式的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。