技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運營

贊助商

分類目錄

贊助商

最新文章

搜索

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>

當(dāng)點擊demo按鈕時，jquery通過attr()函數(shù)獲得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>

當(dāng)點擊demo按鈕時，jquery通過addClass()函數(shù)添加div類名（class name）屬性，然后通過attr()函數(shù)獲得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>

當(dāng)點擊demo按鈕時，jquery通過removeClass()函數(shù)刪除div類名myClass1，然后通過attr()函數(shù)獲得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>

當(dāng)點擊demo按鈕時，jquery通過removeAttr()函數(shù)刪除div類class，然后通過attr()函數(shù)獲得div的類名（class name）屬性。

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

jquery刪除css類屬性

jquery刪除css類屬性

execcodegetcode

 

標(biāo)簽: class  JQuery  css  
x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */