2010年11月11日 星期四

jQuery.css() 的用法

由於對於jQuery所提供的函數還不是很熟析，所以決定一個一個土法煉鋼
來增加自己對語法的熟練度，這篇先來練習.css()這個函數官方提供兩種
表達方式。
一、.css('屬性')
實戰練習
1).JS部分
        <script type="text/javascript">
            $(document).ready(function(){
                //將div加入click事件
             $('div').click(function(){
                //定義color為點選到的<div>的background-color的值
                var color= $(this).css('background-color');
                //然後再把color用彈跳視窗顯示出來，觀察所得到的rgb三原色代號
                alert(color);
             });
            });
        </script>
2).接著是HTML的部份
<body>
        <span id="result">&nbsp;</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>

    </body>
3).CSS的部份
 <style type="text/css">
            div {
                width:60px;
                height:60px;
                margin:5px;
                float:left;
            }
        </style>
4).整段程式碼
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="../js/jquery-1.4.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                //將div加入click事件
             $('div').click(function(){
                //定義color為點選到的<div>的background-color的值
                var color= $(this).css('background-color');
                //然後再把color用彈跳視窗顯示出來，觀察所得到的rgb三原色代號
                alert(color);
             });
            });
        </script>
        <style type="text/css">
            div {
                width:60px;
                height:60px;
                margin:5px;
                float:left;
            }
        </style>
    </head>
    <body>
        <span id="result">&nbsp;</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>

    </body>
</html>

二、.css('屬性','設定值')
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="../js/jquery-1.4.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                //將id=check加入click事件
                $('#check').click(function(){
                    //當點擊的時候更換id=result的樣式
                    $('#result').css('background-color','red');
                });
                //而要增加多種CSS屬性的話表達方式為 .css({'屬性':'設定值','屬性':'設定值'})
                $('#check2').click(function(){
                    $('#result2').css({'background-color' : 'yellow', 'font-weight' : 'bolder','text-align':'center'});
                });
            });
        </script>
    </head>
    <body>
        <div id="result">顯示一</div>
        <div id="check">點我</div>
        <div id="result2">顯示二</div>
        <div id="check2">點我</div>
    </body>
</html>
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)