型態屬性操作 (CSS的屬性) (jQuery 20)

官網連結

目前有12個：
.css()：設定css

以下6個下面範例會說明：
.height()：取得、設定高度
.innerHeight()：取得、設定高度
.outerHeight()：取得、設定高度
.width()：取得、設定寬度
.innerWidth()：取得、設定寬度
.outerWidth()：取得、設定寬度

.scrollLeft()：取得、設定捲軸的寬(裡面)
.scrollTop()：取得、設定捲軸的高(裡面)

.offset()：絕對定位
.position()：相對定位，要使用css的position才有用

jQuery.cssNumber：css物件

※取得css屬性(一組)

<style>
    span{color:blue};
</style>
    
$(function(){
    alert($('span').css('color'));// rgb(0, 0, 255)
});
----------
<span>span</span>

※取得css屬性(多組)

<style>
    .s1 {color:green; background-color:pink; padding:5px;}
    .s2 {color:blue; background-color:lightgreen; padding:10px;}
    .s3 {color:red; background-color:lightblue; padding:15px;}
</style>
    
$(function(){
    $('span').mouseleave(function(){
        var styleSheet = $(this).css(['color', 'background-color', 'padding']);
        $.each(styleSheet, function(k, v){
            alert(k + ":" + v);
        });
    });
});
----------
<span class="s1">span1</span>
<span class="s2">span2</span>
<span class="s3">span3</span>

※設定css屬性

$(function(){
    $('.s1').css('background-color', 'green');
    $('.s2').css({'color':'red', 'background-color':'blue'});
    $('span').css('padding', function(i) {
        return i * 50 + 'px';
    });
});
----------
<span class="s1">span1</span>
<span class="s2">span2</span>
<span class="s3">span3</span>

※使用function設定多個無效

※取得.height()、.innerHeight()、.outerHeight()、width()、.innerWidth()、.outerWidth()

<style>
    div { 
        width:150px; height:200px; 
        padding:10px; 
        border:2px red solid; 
        margin:20px; 
        background-color:lightblue;
    }
</style>
    
$(function() {
    console.log('height/width');
    console.log($('div').css('height'));
    console.log($('div').css('width'));
    console.log($('div').height());
    console.log($('div').width());
    
    console.log('innerHeight/innerWidth');
    console.log($('div').css('innerHeight'));
    console.log($('div').css('innerWidth'));
    console.log($('div').innerHeight());
    console.log($('div').innerWidth());
    
    console.log('outerHeight/outerWidth');
    console.log($('div').css('outerHeight'));
    console.log($('div').css('outerWidth'));
    console.log($('div').outerHeight());
    console.log($('div').outerWidth());
    
    console.log('outerHeight/outerWidth true');
    console.log($('div').outerHeight(true));
    console.log($('div').outerWidth(true));
});
----------
<div>
    div
</div>

※Chrome瀏覽器按F12，如下操作可知道這幾個屬性的用意，其實就是Box Model

一層一層的包覆，最裡面是內容，有些書寫content、有些寫element，然後是padding、border、margin
width:150px; height:200px; 設定content，使用height()和width()取得
padding:10px; 設定padding，使用innerHeight()和innerWidth()取得
border:2px red solid; 設定border，使用outerHeight()和outerWidth()取得
margin:20px; 設定margin，使用outerHeight(true)和outerWidth(true)取得

※結果：
height/width
200px
150px
200
150

innerHeight/innerWidth
undefined
undefined
220
170

outerHeight/outerWidth
undefined
undefined
224
174

outerHeight/outerWidth true
264
214

※以高度內容200來說明，padding我設10，但它是包覆，所以上下左右都有，上下是高度，所以要加20，所以innerHeight會是220
同樣的border我設2，要加4，會變成224；outerHeight也是一樣的想法

※設定.height()、.width()

$(function() {    
    $('div').css('background-color', 'lightblue');
    // $('div').css('height', '200');
    // $('div').css('width', '150');
    $('div').height(200);
    $('div').width(150);
    
    $('div').one('click', function(){
        $(this).height(function(i, h){
            alert(i);
            alert(h);
            return 300;
        });
    
        $(this).width(function(i, w){
            alert(i);
            alert(w);
            return 250;
        });
    });
});
----------
<div>
    div
</div>

※innerXXX和outerXXX沒有這種用法，要設定只好用.css()了

※.scrollLeft()、.scrollTop()

<style>
    div { 
        width:100px; height:100px; 
        border:20px red solid; 
        background-color:lightblue;
        overflow:auto;
    }
</style>
    
$(function() {
    $('div').scrollTop(50);
    $('div').scrollLeft(30);
    $('button').click(function(){
        alert('高：' + $('div').scrollTop());
        alert('寬：' + $('div').scrollLeft());
    });
});
----------
<div>
    ddddddddddddddddddddddddddddddddddddd<br />
    ddddddddddddddddddddddddddddddddddddd<br />
    ddddddddddddddddddddddddddddddddddddd<br />
    ddddddddddddddddddddddddddddddddddddd<br />
    ddddddddddddddddddddddddddddddddddddd<br />
    ddddddddddddddddddddddddddddddddddddd<br />
    ddddddddddddddddddddddddddddddddddddd<br />
    ddddddddddddddddddddddddddddddddddddd<br />
    ddddddddddddddddddddddddddddddddddddd<br />
    ddddddddddddddddddddddddddddddddddddd
</div>
<button>click me</button>

※移動完捲軸再按按鈕

※設定、取得.offset()

<style>
    body {
        padding:0;
        margin:0;
    }
    
    div { 
        width:100px; height:120px; 
        border:20px red solid; 
        background-color:lightblue;
    }
</style>
    
$(function() {
    // $('div').eq(0).offset({ top: 5, left: 10 });
    $('div').eq(0).offset(function(i ,c){
        c.top = 5;
        c.left = 10;
        return c;
    });
    
    $('div').each(function(i){
        var $offset = $('div').eq(i).offset();
        $('div').eq(i).html('左右：' + $offset.left + '<br />高低：' + $offset.top);
    });
});
----------
<div>div1</div>
<div style="float:left">div2</div>
<div style="float:left">div3</div>

※因為沒有設定position，所以用offset()和position()都一樣

※取得.position()

<style>
    body {
        padding:0;
        margin:0;
    }
    
    div { 
        width:100px; height:120px; 
        border:20px red solid; 
        background-color:lightblue;
    }
    
    .two {
        float:right;
        position:relative;
        width:200px; height:240px;
    }
</style>
    
$(function() {
    $('div').each(function(i){
        if(i != 1){
            var $position = $('div').eq(i).position();
            $('div').eq(i).html('左右：' + $position.left + '<br />高低：' + $position.top);
        }
    });
});
----------
<div>div1</div>
<div class="two">
    div2
    <div>div3</div>
</div>

※結果可以看到div3和父元素div2的相對定位，改成offset()會發現兩者不一樣

※因為是相對定位，所以沒有設定的寫法