快捷導(dǎo)航

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

更新時(shí)間：2021年08月31日 16:46:26 作者：安之ccy

本文給大家分享jQuery的CSS樣式屬性css(),width()系列,offset()與position()，scrollLeft()與scrollTop()的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧

1.css()基本使用：

1.1 獲取css屬性

1.1.1 獲取單個(gè)屬性值（傳入字符串）

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是復(fù)合屬性，獲取其值，會(huì)把其中所有的屬性都列出來(lái)

在這里插入圖片描述

1.1.2 獲取多個(gè)屬性值（用數(shù)組）

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

效果：獲取的多個(gè)屬性值用對(duì)象的形式返回

在這里插入圖片描述

1.2 設(shè)置css屬性

1.2.1 設(shè)置單個(gè)屬性值（用字符串）

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

效果：字體變白色

在這里插入圖片描述

1.2.2 設(shè)置多個(gè)屬性值（用對(duì)象）

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

效果：字體顏色為白色，div寬度變成200px

在這里插入圖片描述

1.2.3 demo：每點(diǎn)擊一次div，寬度就增加100px

$('div').click(
    $(this).css({
    width: '+=100'})//自動(dòng)獲取當(dāng)前width屬性，并加100px
)

效果：

在這里插入圖片描述

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

2.1 width()

2.1.1 取width值

與dom.css(‘width')對(duì)比，css(‘width')獲取的結(jié)果是一個(gè)字符串，包含像素值和單位；
width()獲取的結(jié)果是一個(gè)number，不是字符串，不帶單位，方便加減

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

2.1.2 設(shè)置width值

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

2.2 innerWidth()與outerWidth()

2.2.1 取值對(duì)比

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 設(shè)置值：只會(huì)改變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模型圖如下：當(dāng)設(shè)置的寬度比之前設(shè)置的小時(shí)，padding、border、margin均沒(méi)有改變，只有content縮小，直至0

在這里插入圖片描述

寬度設(shè)置得比原先的大，拓寬的也只有content

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

在這里插入圖片描述

3.offset()與position()

3.1 取值對(duì)比

offset()取的是元素相對(duì)于文檔的定位；position()取的是相對(duì)于最近的帶定位的父級(jí)的定位

3.1.1 父級(jí)不設(shè)置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沒(méi)有設(shè)置定位，所以content最近的設(shè)置position的是body，position的值是相對(duì)body的
offset返回的對(duì)象本來(lái)就相對(duì)文檔定位的（body默認(rèn)的margin: 8px由于塌陷所以沒(méi)有了）

在這里插入圖片描述

3.1.2 父級(jí)設(shè)置position

當(dāng)wrapper設(shè)置position時(shí)：

.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 設(shè)置值對(duì)比

position()不可手動(dòng)設(shè)置；offset()可以手動(dòng)設(shè)置

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

效果：相對(duì)文檔定位

在這里插入圖片描述

4.scrollLeft()與scrollTop()

scrollLeft()：獲取橫向滾動(dòng)條距離左側(cè)的值
scrollTop()：獲取縱向滾動(dòng)條距離上方的值

4.1 取值

.wrapper {
    width: 400px;
    overflow: auto;/*橫縱向滾動(dòng)條的關(guān)鍵*/
}
.content {
    display: inline-block;
    width: 100%;
    height: 100%;
}

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

效果：

在這里插入圖片描述

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

4.2 設(shè)置值

在這里插入圖片描述

豎向滾動(dòng)條向上滾，滾動(dòng)的距離是文本內(nèi)容向上沖出的距離，也是滾動(dòng)條下拉的距離

在這里插入圖片描述

4.3 小demo

功能：看文章時(shí)，每隔一段時(shí)間滾動(dòng)條自動(dòng)上滑，呈現(xiàn)后面內(nèi)容，省去手動(dòng)滑的操作

.content {
    width: 400px;
}

文本內(nèi)容由class名為content的div括起：

在這里插入圖片描述

功能實(shí)現(xiàn)的代碼：

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高度由內(nèi)容撐開(kāi)，所以$('body').height()也可以寫(xiě)成$('.content').height()
當(dāng)滾動(dòng)條滾動(dòng)距離+顯示窗口高度>=文本實(shí)際高度時(shí)，代表滾動(dòng)條已經(jīng)拉到底了，就可以清空計(jì)時(shí)器了

在這里插入圖片描述

效果：不斷往下拉，到底之后計(jì)時(shí)器就被清空了

在這里插入圖片描述

會(huì)看到，到最后其實(shí)有一小塊沒(méi)有到底：

在這里插入圖片描述

是因?yàn)閎ody默認(rèn)帶了8px的margin，取消即可

另：嘗試單獨(dú)畫(huà)一個(gè)div放置這個(gè)自動(dòng)滾動(dòng)的效果，鞏固一下判斷條件的理解：

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

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

文本內(nèi)容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)

在這里插入圖片描述