溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“JavaScript實現(xiàn)的常用網(wǎng)頁特效有哪些”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JavaScript實現(xiàn)的常用網(wǎng)頁特效有哪些”這篇文章吧。
offset 翻譯過來就是偏移量， 我們使用 offset 系列相關(guān)屬性可以動態(tài)的得到該元素的位置（偏移）、大小等。
獲得元素距離帶有定位父元素的位置
獲得元素自身的大小（寬度高度）
注意： 返回的數(shù)值都不帶單位
offset常用的屬性有：
例如：給定一個子盒子和一個父盒子，并給他們一定的大小，來看看這些屬性是怎樣獲得的：
<style>
*{
margin: 0px;
padding: 0px;
}
.father{
position: relative;
margin-left: 50px;
margin-top: 10px;
width: 200px;
height: 200px;
background-color: brown;
}
.son{
width: 100px;
height: 100px;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
var father = document.querySelector('.father');
var son = document.querySelector('.son')
console.log('father.offsetLeft',father.offsetLeft);
console.log('father.offsetTop',father.offsetTop);
console.log('son.offsetWidth',son.offsetWidth);
console.log('son.offsetHeight',son.offsetHeight);
</script>
</body>打印結(jié)果為：
我們知道，offset可以幫助我們得到元素的大小和父元素，但是style屬性也可以獲取到相關(guān)屬性，那么，他們的區(qū)別又是什么呢？
offset
offset 可以得到任意樣式表中的樣式值
offset 系列獲得的數(shù)值是沒有單位的
offsetWidth 包含padding+border+width
offsetWidth 等屬性是只讀屬性，只能獲取不能賦值
style
style.width 獲得的是帶有單位的字符串
style.width 獲得不包含padding和border 的值
style.width 是可讀寫屬性，可以獲取也可以賦值
client 翻譯過來就是客戶端，我們使用 client 系列的相關(guān)屬性來獲取元素可視區(qū)的相關(guān)信息。通過 client 系列的相關(guān)屬性可以動態(tài)的得到該元素的邊框大小、元素大小等。
例如，給定一個帶邊框的盒子，返回這些屬性，看看結(jié)果。
<style>
.box{
width: 200px;
height: 200px;
background-color: darkorchid;
border: 20px solid #ccc;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
var box = document.querySelector('.box')
console.log('box.clientWidth:'+box.clientWidth);
console.log('box.clientWidth:'+box.clientWidth);
console.log('box.clientWidth:'+box.clientWidth);
console.log('box.clientTop:'+box.clientTop);
</script>結(jié)果為：
可以發(fā)現(xiàn)，通過client系列的得到的盒子大小并不包含盒子的邊框。
scroll 翻譯過來就是滾動的，我們使用 scroll 系列的相關(guān)屬性可以動態(tài)的得到該元素的大小、滾動距離等。
例如：還是上面案例的盒子，我們打印其scroll系列屬性，看看結(jié)果
<style>
.box{
width: 200px;
height: 200px;
background-color: darkorchid;
border: 20px solid #ccc;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
var box = document.querySelector('.box')
console.log('box.scrollWidth:'+box.scrollWidth);
console.log('box.scrollHeight:'+box.scrollHeight);
console.log('box.scrollLeft:'+box.scrollLeft);
console.log('box.scrollTop:'+box.scrollTop);
</script>結(jié)果為：
我們發(fā)現(xiàn)得到的盒子高度和寬度都是我們的給定值，和client系列得到的值是一樣的，那么他們的區(qū)別是什么呢？現(xiàn)在我們給盒子里面添加超過盒子高度的內(nèi)容：
<div class="box"> 王歡在學(xué)前端<br><br> 王歡在學(xué)前端<br><br> 王歡在學(xué)前端<br><br> 王歡在學(xué)前端<br><br> 王歡在學(xué)前端<br><br> 王歡在學(xué)前端<br><br> 王歡在學(xué)前端 </div>
打印結(jié)果為：
可以發(fā)現(xiàn)此時打印的盒子高度變大了，其實這個值是指盒子加上文字后自身實際的高度。
大家還會發(fā)現(xiàn)兩次打印的box.scrollLeft和box.scrollTop的值都是0，這又是什么意思呢？
現(xiàn)在我們通過overflow:auto將盒子內(nèi)超出的內(nèi)容讓其以滾動條的形式顯示，然后給他添加滾動事件，如下所示：
var box = document.querySelector('.box')
box.addEventListener('scroll',function(){
console.log('box.scrollTop:'+box.scrollTop);
})效果為;
發(fā)現(xiàn)得到的值是隨著滾動來變化的，其實，box.scrollTop返回的是被卷去的上側(cè)距離，如下圖所示：
以上是“JavaScript實現(xiàn)的常用網(wǎng)頁特效有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼