jquery 怎么動態(tài)改變css樣式

推薦使用js的經(jīng)典第三方庫jQuery，調(diào)用方便，代碼精簡：jquery中css()方法可以設(shè)置或返回被選元素的一個或多個樣式屬性，下面的例子將返回首個匹配元素的background-color值：$("p").css("background-color")下面的例子將設(shè)置所有匹配到元素的background-color為紅色：$("p").css("background-color","red")

成都創(chuàng)新互聯(lián)公司專注于相城網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供相城營銷型網(wǎng)站建設(shè)，相城網(wǎng)站制作、相城網(wǎng)頁設(shè)計、相城網(wǎng)站官網(wǎng)定制、小程序定制開發(fā)服務(wù)，打造相城網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供相城網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

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

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

p_class

=

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

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

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

"high");

//設(shè)置p元素的class為

"high"

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

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

“myClass

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

style標(biāo)簽里添加另一組樣式:1

.high{

color:red;

}

2

.another{

font-style:italic;

color:blue;

}

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

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

2

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

//

追加樣式

3

});

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

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

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

color

:

red;

/*

字體顏色設(shè)置紅色*/

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()方法的一個特性來完成同樣的效果。當(dāng)它不帶參數(shù)時，就會將class的值全部刪除，JQuery代碼如下:1

$("p").removeClass();

//移除p元素的所有class

切換樣式

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

1

toggleBtn.toggle(function(){

2

//元素顯示

代碼③

3

},

function(){

4

//元素隱藏

代碼④

5

})

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

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

//重復(fù)切換類名“another”

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

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

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

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

這個方法是為了增強代碼可讀性面產(chǎn)生的。

jquery動態(tài)添加樣式

添加CSS的方式有行內(nèi)式、嵌入式、外鏈?zhǔn)?、?dǎo)入式

a)動態(tài)引入樣式表文件：

function loadLink(url){

var link = document.createElement("link");

link.type = "text/css";

link.rel = "stylesheet";

link.href = url;

var head = document.getElmentsByTagName("head")[0];

head.appendChild(link);

}

b)嵌入式：

function insertStyles(){

var doc,cssCode=[],cssText;

var len = arguments.length;

var head,style,firstStyle;

if(len == 1){

doc = document;

cssCode.push(arguments[0])

}else if(len == 2){

doc = arguments[0];

cssCode.push(arguments[1]);

}else{

alert("函數(shù)最多接收兩個參數(shù)！");

}

head = doc.getElementsByTagName("head")[0];

styles= head.getElementsByTagName("style");

if(styles.length == 0){

if(doc.createStyleSheet){//ie

doc.createStyleSheet();

}else{//FF

var tempStyle = doc.createElement("style");

tempStyle.setAttibute("type","text/css");

head.appendChild(tempStyle);

}

}

firstStyle = styles[0];

cssText=cssCode.join("\n");

if(!+"\v1"){//opacity兼容

var str = cssText.match(/opacity:(\d?\.\d+);/);

if(str!=null){

cssText = cssText.replace(str[0],"filter:alpha(opacity="+pareFloat(str[1])*100+")");

}

}

if(firstStyle.styleSheet){

firstStyle.styleSheee.cssText += cssText;

}else if(doc.getBoxObjectFor){

firstStyle.innerHTML += cssText;

}else{

firstStyle.appendChild(doc.createTextNode(cssText));

}

}

c)行內(nèi)式：

var addStyle=function (ele,str){

var s = ele.getAttribute("style"),styles;

if(str typeof str === "string"){

if(!s){

ele.style.cssText = str;

}else{

if(s == '[object]'){//IE6/7 e.getAttribute("style")返回[object]

s=ele.style.cssText;

}

styles= trim(s).split(";");

for (var i=0,len=styles.length; ilen; i++){

var style_i=trim(styles[i]);

var attr=style_i.split(":")[0];

if(str.indexOf(attr)-1){

styles[i]="";

}else{

styles[i]=style_i;

}

}

ele.style.cssText= styles.join("")+";"+str;

}

}

}

d)導(dǎo)入式：

import "index.css";

操作CSS 類相關(guān)的方法：

var hasClass=function(ele,value){

var rclass = /[\n\t\r]/g,

value=" "+value+" ";

return (ele.nodeType==1)(" "+ele.className+" ").replace(rclass," ").indexOf(value)-1;

}

var trim=function (val){

return val.replace(/(^\s+)|(\s+$)/g,"");

}

var addClass=function(ele,value){

var rspace = /\s+/,classNames,getClass;

if(valuetypeof value === "string"){

classNames = value.split(rspace);

if(ele.nodeType === 1){

if(!ele.className classNames.length == 1){

ele.className = value;

}else{

getClass = " "+ele.className+" ";

for(var i=0,len=classNames.length; ilen ;i++){

var cname=classNames[i];

if(!hasClass(ele,cname)){

getClass += cname+" ";

}

}

ele.className = trim(getClass);

}

}

}

}

var removeClass=function(ele,value){

var rclass = /[\n\t\r]/g,classNames,getClass;

if((valuetypeof value === "string")||value === undefined){

classNames = (value||"").split(rspace);

if(ele.nodeType === 1 ele.className){

if(value){//存在查找要移除的類

getClass = " "+ele.className+" ".replace(rclass," ");//左右空格，為了使類中各類間均等，方便后面替換

for(var i=0,len=classNames.length; ilen; i++){

getClass = getClass.replace(" "+classNames[i]+" "," ")

}

ele.className=trim(getClass);

}else{//不存在移除所有類

ele.className = "";

}

}

}

}

var toggleClass=function(ele,value){

if(typeof value === "string"){

if(hasClass(ele,value)){

removeClass(ele,value);

}else{

addClass(ele,value);

}

}

}

網(wǎng)站題目：jquery動態(tài)樣式,css動態(tài)樣式
文章出自：http://jinyejixie.com/article44/dssdoee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、網(wǎng)站導(dǎo)航、品牌網(wǎng)站制作、網(wǎng)站營銷、云服務(wù)器、建站公司

廣告

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