CSS

Posted on 2016-07-11 Edited on 2023-11-24 In jQuery Views: Disqus:

由於時間有限，所以一些比較簡單的用法就儘量簡述或跳過囉。

一、.addClass()

替元素增加屬性。有兩項多載

1、.addClass( String className )

2、.addClass( Function function )

對於批次添加屬性特別有用，如下範例

$( "ul li" ).addClass(function( index ) {
  return "item-" + index;
});

二、.css()

1、.css( propertyName )

取得單一css樣式的值

$("p").css("background-color")

2、.css( propertyNames )

取得多組css樣式的值

$("p").css(["background-color","color"])

3、.css( propertyName, value )

設定單一css樣式

$("p").css( "color", "red" );

4、.css( propertyName, function )

設定多組css樣式

$( "div.example" ).css( "width", function( index ) {
  return index * 50;
});

5、.css( PlainObject properties )

設定多組css樣式

$( this ).css({
  "background-color": "yellow",
  "font-weight": "bolder"
});

三、.hasClass()

boolean .hasClass( className )

用來判斷該元素是否含有所指定的class名稱。

四、.height()

用來取得或設定元素的高度

五、.innerHeight()

用來取得或設定元素的高度

六、.innerWidth()

用來取得或設定元素的寬度

七、jQuery.cssHooks

用來客制化css樣式名稱。

八、jQuery.cssNumber

用來決定指定css樣式值時，是否自動附加單位，預設為true。

九、jQuery.escapeSelector()

轉譯跳脫字元

$.escapeSelector( "#target" );

十、.offset()

取得該元素左上角的點跟根元素的距離(絕對座標)。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style type="text/css">
        .p1 {
            background-color: red;
            height: 18px;
            margin: 16px 0px 16px 0px;
        }

        .p2 {
            background-color: red;
            height: 18px;
            margin: 16px 0px 16px 0px;
        }
    </style>
</head>
<body>
    <p class="p1">aaa</p>
    <p class="p2">bbb</p>
    <div style="position: absolute; top: 200px; left: 200px;">
        <div class="sub">ccc</div>
    </div>
</body>
</html>

$(".sub").offset().top;

請參考.offset()的用法

十一、.outerHeight()

用來取得或設定元素的高度

十二、.outerWidth()

用來取得或設定元素的寬度

十三、.position()

取得該元素左上角的margin點跟父元素的距離(相對位置)

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style type="text/css">
        .p1 {
            background-color: red;
            height: 18px;
            margin: 16px 0px 16px 0px;
        }

        .p2 {
            background-color: red;
            height: 18px;
            margin: 16px 0px 16px 0px;
        }
    </style>
</head>
<body>
    <p class="p1">aaa</p>
    <p class="p2">bbb</p>
    <div style="position: absolute; top: 200px; left: 200px;">
        <div class="sub">ccc</div>
    </div>
</body>
</html>