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