JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

JavaScript实现三种常用网页特效(offset、client、scroll系列)

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JavaScript实现三种常用网页特效(offset、client、scroll系列)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

一、元素偏移量 offset 系列

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 系列的相关属性来获取元素可视区的相关信息。通过 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 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

例如：还是上面案例的盒子，我们打印其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实现三种常用网页特效(offset、client、scroll系列)的详细内容，更多关于JavaScript网页特效的资料请关注脚本宝典其它相关文章！

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的JavaScript实现三种常用网页特效(offset、client、scroll系列)全部内容，希望文章能够帮你解决JavaScript实现三种常用网页特效(offset、client、scroll系列)所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程