深入學習jQuery樣式操作 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　使用javascript腳本化CSS是一個系列，包括行間樣式、計算樣式、CSS類、樣式表、動態樣式和偽元素這六部分。而jQuery也實現了腳本化CSS的功能，提供了更為簡單易用的方法

設置樣式

　　前面介紹過jQuery的特性操作，可以通過attr()方法進行樣式設置

<style>
.cB{color: blue;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test">測試文字</div>
<button id="btn1">按鈕</button>
<script>
btn1.onclick = function(){
    $('#test').attr('class','cB')
}
</script>

　　[注意]jQuery對象無法直接使用className屬性設置類名，需要轉換為javascript對象才可以使用

<style>
.cB{color: blue;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test">測試文字</div>
<button id="btn1">按鈕</button>
<script>
btn1.onclick = function(){
    $('#test')[0].className = 'cB';
}
</script>

增加樣式

addClass(className)

　　addClass(className)方法為每個匹配元素增加一個或多個樣式名，如果值已存在，則不添加　

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test">測試文字</div>
<button id="btn1">按鈕</button>
<script>
btn1.onclick = function(){
    $('#test').addClass('cB bgO')
}
</script>

addClass(function(index, currentClass))

　　addClass()方法可以接受一個函數作為參數，這個函數返回一個或更多用空格隔開的要增加的樣式名。接收index參數表示元素在匹配集合中的索引位置和currentClass參數表示元素上原來的className。在函數中this指向匹配元素集合中的當前元素

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB">測試文字</div>
<button id="btn1">按鈕</button>
<script>
btn1.onclick = function(){
    $('#test').addClass(function(index,currentClass){
        alert('' + index + currentClass );//'0cB'
        return 'bgO';
    })
}
</script>

刪除樣式

removeClass()

　　removeClass()方法不帶參數時，將刪除全部類名

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">測試文字</div>
<button id="btn1">按鈕</button>
<script>
btn1.onclick = function(){
    $('#test').removeClass();
}
</script>

removeClass([className])

　　removeClass([className])方法用來刪除參數中指定的一個或多個類名

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">測試文字</div>
<button id="btn1">按鈕</button>
<script>
btn1.onclick = function(){
    $('#test').removeClass('cB bgO');
}
</script>

removeClass(function(index, currentClass))

　　removeClass()方法可以接收一個函數為參數，該函數返回一個或多個將要被移除的樣式名。index參數表示在所有匹配元素的集合中當前元素的索引位置，currentClass參數表示原有的樣式名

　　[注意]由于class是保留字，所以形參名設置為class時，會導致錯誤

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">測試文字</div>
<button id="btn1">按鈕</button>
<script>
btn1.onclick = function(){
    $('#test').removeClass(function(index,currentClass){
        alert('' + index + currentClass);//0cB bgO
        return 'bgO';
    });
}
</script>

切換樣式

toggleClass()

　　在做某些效果的時候，可能會針對同一節點的某一個樣式不斷的切換，也就是addClass與removeClass的互斥切換，比如隔行換色效果

　　jQuery提供一個toggleClass()方法用于簡化這種互斥的邏輯，通過toggleClass()方法動態添加刪除Class，一次執行相當于addClass，再次執行相當于removeClass

　　toggleClass()有以下4種用法

【1】toggleClass()

　　當toggleClass()方法沒有參數時，將刪除或還原全部類名

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">測試文字</div>
<button id="btn1">按鈕</button>
<script>
btn1.onclick = function(){
    $('#test').toggleClass();
}
</script>

【2】toggleClass(className)

　　toggleClass(className)方法在匹配的元素集合中的每個元素上切換的一個或多個(用空格隔開)樣式類名

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">測試文字</div>
<button id="btn1">按鈕</button>
<script>
btn1.onclick = function(){
    $('#test').toggleClass('bgO');
}
</script>

【3】toggleClass(className,switch)

　　toggleClass()方法可以接收第二個參數switch，用來判斷樣式類是否應該被添加或刪除。如果這個參數的值是true，那么這個樣式類將被添加，相當于addClass；如果這個參數的值是false，那么這個樣式類將被移除，相當于removeClass

$('#foo').toggleClass(className, addOrRemove);
//等價于
if (addOrRemove){
    $('#foo').addClass(className);
}else{
    $('#foo').removeClass(className);
}

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">測試文字</div>
<button id="btn1">添加</button>
<button id="btn2">刪除</button>
<script>
btn1.onclick = function(){$('#test').toggleClass('bgO',true);}
btn2.onclick = function(){$('#test').toggleClass('bgO',false);}
</script>

【4】toggleClass(function(index,currentClass,switcher)[,switch])

　　toggleClass()可以接收一個函數作為參數，該函數用來返回在匹配的元素集合中的每個元素上用來切換的樣式類名，接收元素的索引位置和元素舊的樣式類作為參數　

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">測試文字</div>
<button id="btn1">添加</button>
<button id="btn2">刪除</button>
<button id="btn3">變更</button>
<script>
btn1.onclick = function(){$('#test').toggleClass(function(index,currentClass,switcher){
    alert('' + index + currentClass + switcher)
    return 'bgO'
},true)};
btn2.onclick = function(){$('#test').toggleClass(function(index,currentClass,switcher){
    alert('' + index + currentClass + switcher)
    return 'bgO'
},false)};
btn3.onclick = function(){$('#test').toggleClass(function(index,currentClass,switcher){
    alert('' + index + currentClass + switcher)
    return 'bgO'
})};
</script>

判斷樣式

hasClass(className)

　　hasClass(className)方法用于確定任何一個匹配元素是否有被分配給定的類名，如果有則返回true；否則，返回false

<style>
.cB{color: blue;}
.bgO{background-color:orange;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" class="cB bgO">測試文字</div>
<button id="btn1">按鈕</button>
<button id="btn2">是否存在指定樣式</button>
<script>
btn1.onclick = function(){$('#test').toggleClass('bgO');}
btn2.onclick = function(){alert($('#test').hasClass('bgO'))}
</script>

　　[注意]該方法實際是為了增強代碼可讀性產生的。在jQuery()內部實際上是調用了is()方法來完成這個功能的

　　在javascript中，HTML5為所有元素添加了classList屬性，這個classList屬性是新集合類型DOMTokenList的實例，它也有類似的方法

add(value)              將給定的字符串值添加到列表中，如果值已存在，則不添加
contains(value)         表示列表中是否存在給定的值，如果存在則返回true,否則返回false
remove(val，e)          從列表中刪除給定的字符串
toggle(value)           如果列表中已經存在給定的值，刪除它；如果列表中沒有給定的值，添加它

　　由于IE9-瀏覽器不支持classList屬性，也就不支持add()、contains()、remove()和toggle()這四個方法

　　關于classList屬性的類似的4個方法及兼容寫法的詳細信息移步至此

樣式操作

　　在javascript中，查詢計算樣式需要處理getComputedStyle()方法和currentStyle屬性的兼容；設置行間樣式需要對style屬性賦值

　　而在jQuery中，使用CSS()方法就可以解決以上的問題

【獲取樣式】

css(propertyName)

　　css(propertyName)方法用來獲取匹配元素集合中的第一個元素的樣式屬性的計算值。要注意的是，這里獲取的是計算樣式，即類似于原生javascript的getComputedStyle或currentStyle

<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<span id="result"></span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
<script>
$("div").click(function () {
  $("#result").html("背景顏色是 " + $(this).css("background-color"));
});
</script>

　　[注意]簡寫速寫的CSS屬性(如：margin,background,border)不支持

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" style="margin-top:10px;">測試文字</div>
<script>
//chrome瀏覽器輸出10px 0px 0px
//firefox和IE瀏覽器輸出空字符串''
console.log( $('#test').css('margin'));
</script>

css(propertyNames)

　　css(propertyNames)方法也可以接受一個或多個CSS屬性組成的數組作為參數

　　從jQuery 1.9開始, 傳遞一個CSS的樣式屬性的數組給.css()將返回屬性-值配對的對象

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" style="margin-top:10px;">測試文字</div>
<script>
//{width: "1904px", height: "18px", font-size: "16px"}
console.log( $('#test').css(['width','height','font-size']));
</script>

【設置樣式】

css(propertyName,value)

　　可以通過css(propertyName,value)方法進行樣式設置

　　[注意]從jQuery1.6開始，css()接受類似于animate()的相對值。相對值時以+=或者-=開頭的字符串，表示遞增或遞減當前的值。如果一個元素的左padding是10px，.css( "padding-left", "+=15" )將返回總的左padding為25px

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" style="width:100px;background-color:grey">測試文字</div>
<script>
$('#test').mouseover(function(){
    $(this).css('color','red');
    $(this).css('width','+=100');
})
$('#test').mouseout(function(){
    $(this).css('color','green');
    $(this).css('width','-=100');
})
</script>

css(properties)

　　css()方法設置樣式時，允許以一個屬性-值配對的對象作為參數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" style="width:100px;background-color:grey">測試文字</div>
<script>
$('#test').mouseover(function(){
    $(this).css({'color':'red','width':'+=100'});
})
$('#test').mouseout(function(){
    $(this).css({'color':'green','width':'-=100'});
})
</script>

　　[注意]css()方法支持駝峰寫法與中劃線寫法，內部做了容錯的處理

　　在駝峰寫法中，屬性名可以不使用引號包裹；但是在中劃線寫法中，必須用引號包裹

.css({'background-color': '#ffe', 'border-left': '5px solid #ccc'}) 
//等價于
.css({backgroundColor: '#ffe', borderLeft: '5px solid #ccc'})

css(propertyName,function(index, value))

　　通過css()方法設置樣式時，第二個參數可以是一個函數，this指向當前元素，index參數表示元素在匹配集合中的索引位置，html參數表示元素上原來的HTML內容。函數返回設置的值　

　　[注意]當一個數只被作為值(value)的時候，jQuery會將其轉換為一個字符串，并添在字符串的結尾處添加px，例如.css("width",50})與.css("width","50px"})一樣

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="test" style="width:100px;background-color:grey">測試文字</div>
<script>
$('#test').mouseover(function(){
    $(this).css({width:function(index ,value){
        return parseFloat(value) * 1.2;
    },color: 'red'
});
})
$('#test').mouseout(function(){
    $(this).css({width:function(index ,value){
        return parseFloat(value) / 1.2;
    },color: 'green'});
})
</script>

刪除樣式

　　使用css()方法也可以刪除樣式，當css()方法的樣式屬性的值為空字符串時，會從元素上移除該樣式(若該屬性存在的話)

　　[注意]IE8-瀏覽器中，刪除的簡寫屬性，如border或background將完全刪除該元素樣式，不管是在樣式表或<style>元素中

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style>
div{border-left:3px solid black;}
</style>
<body>
<div id="test" style="border-left:3px solid green;">內容</div>
<script>
$('#test').click(function(){
    $(this).css('border','');
})
</script>