JQuery操作元素的css樣式

字號(hào):


    我們常常要使用Javascript來(lái)改變頁(yè)面元素的樣式。其中一種辦法是改變頁(yè)面元
    素的CSS類(Class),這在傳統(tǒng)的Javascript里,我們通常是通過(guò)處理HTML
    Dom的classname特性來(lái)實(shí)現(xiàn)的;而jQuery里提供三種方法來(lái)實(shí)現(xiàn)這個(gè)功能,
    雖然它們和傳統(tǒng)方法的思想相通,但是卻節(jié)省了許多代碼。還是那句 話 –
    “jQuery讓JavaScript代碼變得簡(jiǎn)潔!”
    1. addClass() – 添加CSS類
    代碼如下:
    $(“#target”).addClass(“newClass”);
    //#target 指的是需要添加樣式的元素的ID
    //newClass 指的是CSS類的名稱
    2. removeClass() – 移除CSS類
    代碼如下:
    $(“#target”).removeClass(“oldClass”);
    //#target 指的是需要移除CSS類的元素的ID
    //oldClass 指的是CSS類的名稱
    3. toggleClass() – 添加或者移除CSS類:如果CSS類已經(jīng)存在,它將被移除;
    相反,如果CSS類不存在,它將被加上。
    代碼如下:
    $(“#target”).toggleClass(“newClass”)
    //如果ID為“target”的元素已經(jīng)定義了CSS樣式,它將被移除;
    //反之,CSS類”newClass“將被賦給該ID。
    在實(shí)際運(yùn)用中,我們常常先定義好這些CSS類,然后通過(guò)Javascript事件觸
    發(fā)(比如點(diǎn)擊某個(gè)鏈接)來(lái)改變頁(yè)面元素樣式。此外,jQuery還提供一種方
    法 hasClass(“className”)用來(lái)判斷某個(gè)元素是否已經(jīng)被賦予某個(gè)CSS類。
    下面是一個(gè)完整的例子。
    代碼如下:
    <span style=”font-size:18px;”><!DOCTYPE HTML>
    <head>
    <title>圖片閃爍</title>
    <style type=”text/css”>
    @-webkit-keyframes twinkling{ /*透明度由0到1*/
    0%{
    opacity:0; /*透明度為0*/
    }
    100%{
    opacity:1; /*透明度為1*/
    }
    }
    .up{
    -webkit-animation: twinkling 1s infinite ease-in-out;
    }
    </style>
    </head>
    <body>
    <div id=”soccer” class=”up”>
    哈哈
    </div>
    <br/>
    <input type=”button” onclick='btnClick()'>
    <script src=”./jQuery/jquery-1.8.3.js” type=”text/javascript”></script>
    <script>
    function btnClick(){
    //$(“#soccer”).removeClass(“up”);
    $(“#soccer”).toggleClass(“up”);
    //$(“p:first”).removeClass(“intro”);
    }
    </script>
    </body>
    </html>
    </span>
    以上所述就是本文關(guān)于jQuery操作CSS樣式的全部?jī)?nèi)容了,希望大家能夠喜歡。