JQuery获取/添加/删除HTML控件的CSS类名(class name) - js技术_卡卡网
技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

新贝彩票开户

赞助商

分类目录

赞助商

最新文章

搜索

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获得html控件类名

execcodegetcode

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添加类名属性

execcodegetcode

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类名

execcodegetcode

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类属性

jquery删除css类属性

execcodegetcode

 

标签: class  JQuery  css  
  • IT热文
  • 站长推荐
500彩票开户 聚发彩票开户 巴登彩票开户 豪客彩开户 优博彩票开户 七天彩票开户 红牛彩票开户 金沙彩票投注 优优彩票开户 利盈彩票开户

about:blank "); rng.document.write(""); rng.document.close(); } //********************************************************* about:blank "); rng.document.write(""); rng.document.close(); } function copySuccess(){ alert("复制代码成功,您现在可以把它粘贴到任何地方了。"); } jQuery(document).ready(function () { setTimeout(function () { var jq = {}; $('[_copy]').hover(function () { var j_nav = $(this).attr('_copy'); clearTimeout(jq[j_nav + '_timer']); jq[j_nav + '_timer'] = setTimeout(function () { $('#' + j_nav).stop(true, true).fadeIn(200); },150); },function () { var j_nav = $(this).attr('_copy'); clearTimeout(jq[j_nav + '_timer']); jq[j_nav + '_timer'] = setTimeout(function () { $('#' + j_nav).stop(true, true).fadeOut(200); },150); }); },3000); }); //*********************************************************