jquery 如何動態(tài)添加、刪除class樣式

例如使用attr()方法來獲取p元素的class，JQuery代碼如下:var

成都創(chuàng)新互聯公司主要從事成都網站制作、成都網站建設、網頁設計、企業(yè)做網站、公司建網站等業(yè)務。立足成都服務喀什,10余年網站建設經驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:18980820575

p_class

=

$("p").attr("class");

//獲取p元素的class使用attr()方法來設置p元素的class，JQuery代碼如下:1

$("p").attr("'class",

"high");

//設置p元素的class為

"high"

在大多數情況下，它是將原來的class替換為新的class，而不是在原來的基礎上追加新的class。追加樣式

什么是追加class呢?假如p元素原本的class為myClass，那么追加一個名叫high的class后，class屬性變?yōu)?/p>

“myClass

high”，即myClass和high兩種樣式的疊加。JQuery提供了專門的addClass()方法來追加樣式。為了使例子更容易理解，首先在

style標簽里添加另一組樣式:1

.high{

color:red;

}

2

.another{

font-style:italic;

color:blue;

}

然后在網頁中添加一個“追加class類”的按鈕，按鈕的事件代碼如下:1

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

2

$("#nm_p").addClass("another");

//

追加樣式

3

});

最后當單擊“追加class類”按鈕時，p元素樣式就會變?yōu)樾斌w，而先前的紅色字體也會變?yōu)樗{色。此時p元素同時擁有兩個class值，即"high"和"another"。在CSS中有以下兩條規(guī)定。1.如果給一個元素添加了多個class值，那么就相當于合并了它們的樣式。

2.如果有不同的class設定了同一樣式屬性，則后者覆蓋前者。

在上例中，相當于給p元素添加了如下樣式:1

color

:

red;

/*

字體顏色設置紅色*/

2

font-style:italic;

3

color:blue;

在以上的樣式中，存在兩個“color”屬性，而后面的“color”屬性會覆蓋前面的“color”屬性，因此最終的“color”屬性的值為“blue”，而不是“red”。移除樣式

如果用戶單擊某個按鈕時，要刪除class的某個值，那么可以使用與addClass()方法相反的removeClass()方法來完成，它的

作用是從匹配的元素中刪除全部或者指定的class。例如可以使用如下的JQuery代碼來刪除p元素中值為“high”的class:1

$("p").removeClass("high");

//移除p元素中值為"high"的class

如果要把p元素的兩個class都刪除，就要使用兩次removeClass()方法，代碼如下:1

$("p").removeClass("high").removeClass("another");

JQuery提供了更簡單的方法?？梢砸钥崭竦姆绞絼h除多個class名，代碼如下:1

$("p").removeClass("high

another");

另外，還可以利用removeClass()方法的一個特性來完成同樣的效果。當它不帶參數時，就會將class的值全部刪除，JQuery代碼如下:1

$("p").removeClass();

//移除p元素的所有class

切換樣式

JQuery中有一個方法toggle()，JQuery代碼如下:

1

toggleBtn.toggle(function(){

2

//元素顯示

代碼③

3

},

function(){

4

//元素隱藏

代碼④

5

})

toggle()方法此處的作用是交替執(zhí)行代碼③和代碼④兩個函數，如果元素原來是顯示的，則隱藏它:如果元素原來是隱藏的，則顯示它。此時，toggle()方法主要是控制行為上的重復切換。另外JQuery還提供了一個toggleClass()方法控制樣式上的重復切換。如果類名存在則刪除它，如果類名不存在則添加它。例如對p元素進行toggleClass()方法操作。1

$("p").toggleClass("another");

//重復切換類名“another”

當不斷單擊“切換樣式”按鈕時，p元素的class的值就會在“myClass”和“myClass

another”之間重復切換。判斷是否含有某個樣式

hasClass()可以用來判斷元素中是甭含有某個class，如果有，則返回true，否則返回false。例如可以使用下面的代碼來判斷p元素中是否含有“another”的class:1

$("p").hasClass("another");

這個方法是為了增強代碼可讀性面產生的。

在jquery中，想要給第一個指定的元素添加樣式的寫法是？假設樣式名為：.className

使用jQuery的addClass方法即可，代碼如下

!DOCTYPE html

html lang="zh-CN"

head

meta charset="utf-8"

meta http-equiv="X-UA-Compatible" content="IE=edge"

meta name="viewport" content="width=device-width, initial-scale=1"

title測試/title

style type="text/css"

.className2 {

color: red;

}

/style

/head

body

div class='className'我是className,準備添加className2/div

＜button id="addStyle"添加className2樣式/button

＜button id="rmStyle"刪除className2樣式/button

script src="jquery.min.js"/script

script type="text/javascript"

$(function(){

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

$(".className").addClass("className2");

})

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

$(".className").removeClass("className2");

})

})

/script

/body

/html

jquery 點擊增加樣式，點擊移除樣式

jquery 點擊增加樣式，點擊移除樣式，代碼如下：

$("li").click(function(){

$(this).toggleClass("enable");

$(this).siblings().removeClass("enable");

})

擴展資料

如果用戶單擊某個按鈕時，要刪除class的某個值，那么可以使用與addClass()方法相反的removeClass()方法來完成，它的作用是從匹配的元素中刪除全部或者指定的class。例如可以使用如下的JQuery代碼來刪除p元素中值為“high”的class:

$("p").removeClass("high");

//移除p元素中值為"high"的class

參考資料：百度百科 jQuery

百度百科 樣式 （計算機術語）

jquery怎么添加css樣式

可以用jquery中的css()方法；

css()有兩個參數。第一個參數是必選參數，一般是指css樣式中的屬性。第二個參數是可選參數，一般是指css樣式中屬性的值。當只有第一個參數是，則是指獲取該屬性的值。如果也有第二個參數，那就是表示改變屬性的值。

示例如下：

!doctype?html

html

head

meta?charset='utf-8'?/

title/title

script?type="text/javascript"?language="javascript"?src='jquery.js'/script

script?language='javascript'

$(function(){

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

//css()為一個參數

var?divWid=$('#div-box').css('width');

alert(divWid);

});

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

//css()為兩個參數

var?divWid=$('#div-box').css('background','#00f');

});

})

/script

style?type="text/css"

#div-box?{width:200px;height:100px;background:#f00;}

/style

/head

body

div?id="div-box"/div

input?type='button'?id='btn1'?value='提取'?/

input?type='button'?id='btn2'?value='改變'?/

/body

/html

jquery中下面哪個方法可以給元素添加樣式?

.css();后面是兩個參數，比如給id為n1的控件添加背景色可以這樣

$("#n1").css("background","red");

分享標題：jquery添加樣式,jquery為元素添加樣式
網站地址：http://jinyejixie.com/article36/dsdgssg.html

成都網站建設公司_創(chuàng)新互聯，為您提供定制開發(fā)、移動網站建設、外貿建站、軟件開發(fā)、定制網站、品牌網站設計

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯