您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)jQuery中CSS樣式屬性css()及width()的示例分析,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
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.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.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.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');
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; }
效果:
position()不可手動(dòng)設(shè)置;offset()可以手動(dòng)設(shè)置
$('.content').offset({ left: 50, top: 50 });
效果:相對(duì)文檔定位
scrollLeft():獲取橫向滾動(dòng)條距離左側(cè)的值
scrollTop():獲取縱向滾動(dòng)條距離上方的值
.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()
豎向滾動(dòng)條向上滾,滾動(dòng)的距離是文本內(nèi)容向上沖出的距離,也是滾動(dòng)條下拉的距離
功能:看文章時(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)
關(guān)于“jQuery中CSS樣式屬性css()及width()的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。