jQuery中的CSS樣式屬性css()及width()系列大全

1.css()基本使用:

 1.1 獲取css屬性

1.1.1 獲取單個屬性值(傳入字符串)

div {
    width: 100px;
    height: 100px;
    background: red;
}
<div>div1</div>
<script src="./jQuery/jquery-3.6.0.js"></script>
<script>
    console.log( $('div').css('width') );
    console.log( $('div').css('background') );
</script>

效果:由於background是復合屬性,獲取其值,會把其中所有的屬性都列出來

在這裡插入圖片描述

1.1.2 獲取多個屬性值(用數組)

console.log( $('div').css(['width', 'background']) );

效果:獲取的多個屬性值用對象的形式返回

在這裡插入圖片描述

1.2 設置css屬性

1.2.1 設置單個屬性值(用字符串)

$('div').css('color', 'white');

效果:字體變白色

在這裡插入圖片描述

1.2.2 設置多個屬性值(用對象)

$('div').css({
    color: 'white',
    width: '200px'
    //此處可以寫'200','200px',或者200,默認都以像素為單位
});

效果:字體顏色為白色,div寬度變成200px

在這裡插入圖片描述

1.2.3 demo:每點擊一次div,寬度就增加100px

$('div').click(
    $(this).css({
    width: '+=100'})//自動獲取當前width屬性,並加100px
)

效果:

在這裡插入圖片描述

2.width()系列基本使用(height()系列同理)

 2.1 width()

2.1.1 取width值

與dom.css(‘width’)對比,css(‘width’)獲取的結果是一個字符串,包含像素值和單位;
width()獲取的結果是一個number,不是字符串,不帶單位,方便加減

console.log( $('div').css('width') );//'100px'
console.log( $('div').width() );//100 number類型

2.1.2 設置width值

// console.log( $('div').css('width','200px') );
console.log( $('div').width('200px') );

2.2 innerWidth()與outerWidth()

2.2.1 取值對比

div {
    width: 100px;
    height: 100px;
    padding: 30px;
    border: 20px solid orange;
    margin: 10px;
    background: red;
}
console.log( $('div').width() );//100 = content
console.log( $('div').innerWidth() );//160 = content + padding
console.log( $('div').outerWidth() );//200 = content + padding + border
console.log( $('div').outerWidth(true) );//220 = content + padding + border + margin

在這裡插入圖片描述

2.2.2 設置值:隻會改變content的寬度

$('div').innerWidth('100');//將content+padding總值改成100px,padding不變,content寬度變成40px
$('div').innerWidth('50');//padding仍不變,content變成0
$('div').outerWidth('150');//content+padding+border=content+30*2+20*2=150,content=50
$('div').outerWidth('50');//content+30*2+20*2=50,content=0,padding,margin,border不變

box模型圖如下:當設置的寬度比之前設置的小時,padding、border、margin均沒有改變,隻有content縮小,直至0

在這裡插入圖片描述

寬度設置得比原先的大,拓寬的也隻有content

$('div').innerWidth('300');

在這裡插入圖片描述

3.offset()與position()

3.1 取值對比

offset()取的是元素相對於文檔的定位;position()取的是相對於最近的帶定位的父級的定位

3.1.1 父級不設置position

.wrapper {
    width: 300px;
    height: 300px;
    margin: 100px;
    background: #ccc;
}
.content {
    position: absolute;
    left: 150px;
    top: 150px;
    width: 100px;
    height: 100px;
    background: red;
}
<div class="wrapper">
    <div class="content"></div>
</div>
<script src="./jQuery/jquery-3.6.0.js"></script>
<script>
    console.log($('.content').offset());
    console.log($('.content').position());
</script>

效果:由於wrapper沒有設置定位,所以content最近的設置position的是body,position的值是相對body的
offset返回的對象本來就相對文檔定位的(body默認的margin: 8px由於塌陷所以沒有瞭)

在這裡插入圖片描述

在這裡插入圖片描述

3.1.2 父級設置position

當wrapper設置position時:

.wrapper {
    position: relative;
    top: 100px;
    left: 100px;
    width: 300px;
    height: 300px;
    background: #ccc;
}
.content {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
    background: red;
}

效果:

在這裡插入圖片描述
在這裡插入圖片描述

3.2 設置值對比

position()不可手動設置;offset()可以手動設置

$('.content').offset({
    left: 50,
    top: 50
});

效果:相對文檔定位

在這裡插入圖片描述

4.scrollLeft()與scrollTop()

scrollLeft():獲取橫向滾動條距離左側的值
scrollTop():獲取縱向滾動條距離上方的值

4.1 取值

.wrapper {
    width: 400px;
    overflow: auto;/*橫縱向滾動條的關鍵*/
}
.content {
    display: inline-block;
    width: 100%;
    height: 100%;
}
$('.content').offset({
    left: 50,
    top: 50
});

效果:

在這裡插入圖片描述

要在父級(.wrapper)上取值,如果父級是body,可以直接在document上取值:$(document).scrollLeft()

4.2 設置值

在這裡插入圖片描述

豎向滾動條向上滾,滾動的距離是文本內容向上沖出的距離,也是滾動條下拉的距離

在這裡插入圖片描述
在這裡插入圖片描述

4.3 小demo

功能:看文章時,每隔一段時間滾動條自動上滑,呈現後面內容,省去手動滑的操作

.content {
    width: 400px;
}

文本內容由class名為content的div括起:

在這裡插入圖片描述

功能實現的代碼:

var timer;
var newTop;
timer = setInterval(function () {
    newTop = $(document).scrollTop();
    if (newTop + $(window).height() >= $('body').height()) {
        clearInterval(timer);
    } else {
        console.log('timer');
        $(document).scrollTop(newTop + 20);
    }

}, 100)

body高度由內容撐開,所以$('body').height()也可以寫成$('.content').height()
當滾動條滾動距離+顯示窗口高度>=文本實際高度時,代表滾動條已經拉到底瞭,就可以清空計時器瞭

在這裡插入圖片描述

效果:不斷往下拉,到底之後計時器就被清空瞭

在這裡插入圖片描述

會看到,到最後其實有一小塊沒有到底:

在這裡插入圖片描述

是因為body默認帶瞭8px的margin,取消即可

另:嘗試單獨畫一個div放置這個自動滾動的效果,鞏固一下判斷條件的理解:

body {
    margin: 0;
}
.wrapper {
    height:400px;
    width: 400px;
    overflow: auto;
}

.content {
    
    display: inline-block;
    width: 100%;
}

文本內容content外又包裹瞭一層wrapper

var timer;
var newTop;
timer = setInterval(function () {
    newTop = $('.wrapper').scrollTop();
    if (Math.round(newTop + $('.wrapper').height()) >= Math.round($('.content').height())) {
        clearInterval(timer);
        console.log('clear');
    } else {
        console.log('timer');
        $('.wrapper').scrollTop(newTop + 20);
    }

}, 100)

在這裡插入圖片描述

到此這篇關於jQuery中的CSS樣式屬性css()及width()系列大全的文章就介紹到這瞭,更多相關jQuery的CSS樣式屬性內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: