jQuery 實戰讀書筆記之第五章：使用 jQuery 操作頁面

修改元素的樣式

/*
樣式名的值是以空格分割多個值de字元串形式出現，而不是以 COM 屬性數組的形式，這給處理帶來了複雜性。
HTML5 引入了一個好的解決辦法，通過稱為 classList （樣式列表）的 API 實現。
*/
 

/*
原生 js 使用 classList 增加樣式
*/
var elements = document.getElementsByClassName('box-small');

for(var i = 0; i < elements.length; i++){
    elements[i].classList.add('target');
}

/*
addClass(names)
為集合中的元素添加指定的樣式名
name(String|Function)：空格分割的多個樣式名字元串；如果是函數，調用函數的上下文是當前元素（this），
參數是元素索引和元素當前樣式值（所有用到的樣式名，用空格分割）
*/
$('img').addClass(function(index, styleValue){
    console.log(this);
    console.log(styleValue);
    return 'target';
});

$('.box-small').addClass(function(index, styleValue){
    console.log(this);
    console.log(styleValue);
    return 'target';
});

/*
removeClass(names)
從 jQuery 集合中刪除每個元素指定的樣式；如果是函數，調用函數的上下文是當前元素（this），參數是元素索引和要刪除的樣式名
*/
$('#target-pane > div').removeClass('target');

/*
toggleClass([names][, switch])
為沒有樣式的元素指定添加指定的樣式名，或者刪除已經存在的樣式
如果設置 switch 參數，當 switch 為 true 時，那麼樣式通常會添加樣式到沒有此樣式的元素上，如果為false，從元素中刪除該樣式
如果無參調用，集合中所有樣式都會刪除或恢復
如果只設置 switch 參數，集合中每個元素的樣式名將根據 switch 的值保留會刪除
如果提供了函數，則返回值為樣式名
*/
var switchValue = true;

$('#button-toggle').click(function(){   
    $('img').toggleClass('target');
    switchValue = !switchValue;
    console.log(switchValue);
   $('#target-panel').toggleClass(switchValue);

    /*
    hasClass(name)
    確定集合中的元素是否包含指定的樣式
    */
    console.log('id 為 target-panel 的 div 是否包含 target 樣式：' + $('#target-panel').hasClass('target'));
});

/*
直接在元素上添加樣式代碼（DOM 元素的 style 屬性），可以覆蓋預定的樣式（設置了 !important 的除外）
*/

/*
css(name, value)
css(properties)
為每個元素的 CSS 樣式設置指定的 value
*/

/*
給按鈕增加 20px 寬度（如果設置長度和寬度沒有指定單位，那麼預設就是 px）
*/
$('#button-toggle').css('width', '+=20');

$('p').css({
    margin: '1em',
    color: '#FFFFFF',
    opacity: 0.8
});

$('button').css({
    margin: '1em',
    color: '#368392',
    opacity: function(index, currentValue){
        return 1 - ((index % 10 + 2) / 10);
    }

});