jquery追加删除html,JQuery获取/添加/删除HTML控件的CSS类名(class name)

本文介绍如何使用JQuery获取、添加、删除、更新HTML控件的CSS类名(class name)。

jquery获得css类名

下面的代码段说明如何使用jquery获取HTML控件的类名(class name)属性。

$("#demo").on("click", function () {

var className = $("#myDiv").attr("class");

alert(className);

});

当点击demo按钮时，jquery通过attr()函数获得div的类名(class name)属性。

JQuery获得html控件类名

jquery添加css类名

下面的代码段说明如何使用jquery添加HTML控件的类名(class name)属性。

$("#demo").on("click", function () {

$("#myDiv").addClass("myClass1");

//获得更新后的类名

var classes = $("#myDiv").attr("class");

alert(classes);

});

当点击demo按钮时，jquery通过addClass()函数添加div类名(class name)属性，然后通过attr()函数获得div的类名(class name)属性。

jquery添加类名属性

jquery删除类名属性

下面的代码段解释了如何使用jquery从基于其名称的HTML控件中移除CSS类。

$("#demo").on("click", function () {

//删除css类

$("#myDiv").removeClass("myClass1");

//获得更新后的css类

var classes = $("#myDiv").attr("class");

alert(classes);

});

当点击demo按钮时，jquery通过removeClass()函数删除div类名myClass1，然后通过attr()函数获得div的类名(class name)属性。

jquery删除css类名

jquery删除css类属性

上例中介绍jquery删除css某个类名的方法，本例中将介绍如何删除div的类属性，即是删除div的class属性。

$("#demo").on("click", function () {

//删除所有CSS类

$("#myDiv").removeAttr("class");

//获得更新后的CSS类

var classes = $("#myDiv").attr("class");

alert(classes);

});

当点击demo按钮时，jquery通过removeAttr()函数删除div类class，然后通过attr()函数获得div的类名(class name)属性。

由于div没有了class属性，所以返回undefined的提示。

jquery删除css类属性