JQuery获取/添加/删除HTML控件的CSS类名(class name)
作者:admin 时间:2019-8-30 10:51:3 浏览:本文介绍如何使用JQuery获取、添加、删除、更新HTML控件的CSS类名(class name)。
jquery获得css类名
下面的代码段说明如何使用jquery获取HTML控件的类名(class name)属性。
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
</br>
<div class = "myClass" id = "myDiv"></div>
<input type="button" id="demo" value = "Demo" />
<script type="text/javascript">
$("#demo").on("click", function () {
var className = $("#myDiv").attr("class");
alert(className);
});
</script>
</body>
</html>
当点击demo按钮时，jquery通过attr()函数获得div的类名（class name）属性。
JQuery获得html控件类名
jquery添加css类名
下面的代码段说明如何使用jquery添加HTML控件的类名(class name)属性。
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
</br>
<div id = "myDiv"></div>
<input type="button" id="demo" value = "Demo" />
<script type="text/javascript">
$("#demo").on("click", function () {
$("#myDiv").addClass("myClass1");
//获得更新后的类名
var classes = $("#myDiv").attr("class");
alert(classes);
});
</script>
</body>
</html>
当点击demo按钮时，jquery通过addClass()函数添加div类名（class name）属性，然后通过attr()函数获得div的类名（class name）属性。
jquery添加类名属性
jquery删除类名属性
下面的代码段解释了如何使用jquery从基于其名称的HTML控件中移除CSS类。
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
</br>
<div class = "myClass1 myClass2" id = "myDiv"></div>
<input type="button" id="demo" value = "Demo" />
<script type="text/javascript">
$("#demo").on("click", function () {
//删除css类
$("#myDiv").removeClass("myClass1");
//获得更新后的css类
var classes = $("#myDiv").attr("class");
alert(classes);
});
</script>
</body>
</html>
当点击demo按钮时，jquery通过removeClass()函数删除div类名myClass1，然后通过attr()函数获得div的类名（class name）属性。
jquery删除css类名
jquery删除css类属性
上例中介绍jquery删除css某个类名的方法，本例中将介绍如何删除div的类属性，即是删除div的class属性。
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
</br>
<div class = "myClass1 myClass2" id = "myDiv"></div>
<input type="button" id="demo" value = "Demo" />
<script type="text/javascript">
$("#demo").on("click", function () {
//删除所有CSS类
$("#myDiv").removeAttr("class");
//获得更新后的CSS类
var classes = $("#myDiv").attr("class");
alert(classes);
});
</script>
</body>
</html>
当点击demo按钮时，jquery通过removeAttr()函数删除div类class，然后通过attr()函数获得div的类名（class name）属性。
由于div没有了class属性，所以返回undefined的提示。
jquery删除css类属性
- 站长推荐
