JavaScript三种常用网页特效详解

目录

1 元素偏移量offt系列1.1 offt概述1.2 offt与style的区别2 元素可视区client系列3 元素滚动scroll系列

1 元素偏移量offt系列

1.1 offt概述

offt含义：offt的含义是偏移量，使用offt的相关属性可以动态地获取该元素的位置、大小等。

属性说明offtleft返回元素相对其带有定位的父元素左边框的偏移offttop返回元素小学班级公约相对其带有定位的元素上方的偏移父offtwidth返回自身的宽度（包括padding、边框和内容区域的宽度）。注意返回数值不带单位offtheight返回自身的高度（包括padding、边框和内容区域的高度）。注意返回数值不带单位offtparent返回作为该元素带有定位元素的父级元素（如果父级都没有定位则返回body）

获取鼠标位置：鼠标指针在盒子内的坐标位置示意图分析。

示例：写一个盒子，在终端输出这个盒子的宽度和高度，获取并输出鼠标指针在盒子内的坐标

    <div id="box"></div>    <script>        var box = document.querylector('#box');        //1.输出box的宽度和高度 暗月小马       console.log("宽度：", box.offtwidth);        console.log("高度：", box.offtheight);        //2.给box绑定鼠标移动的事件        box.addeventlistener('moumove', function (e) {            //2.1 获取box的偏移量            var left = box.offtleft;            var top = box.offttop;            console.log("偏移量：(" + left + "," + top + ")");            //2.2 计算鼠标指针在box中的坐标            var x = e.pagex - left;            var y = e.pagey - top;            console.log("x轴坐标：" + x + ",y轴坐标：" + y);        })    </script>

鼠标每在盒子中移动一点，终端就会输出相应的坐标。

1.2 offt与style的区别

offtstyleofft可以得到任意样式表中宁夏高考状元的样式值style只能得到行内样式表中的样式值offt系列获得的数值是没有单位的style.width获得的是带有单位的字符串offtwidth包含padding、border、width的值style.width获得的是不包含padding、border的值offtwidth等属性是只读属性，只能获取不能赋值style.width是可读写属性，可以获取也可以赋值

2 元素可视区client系列

client系列：client中文意思是客户端，通过使用client系列的相关属性可以获取元素可视区的相关信息。

属性说明clientleft返回元素左边框的大小clienttop返回元素上边框的大小clientwidth返回自身的宽度（包含padding），内容区域的宽度（不含边框）。注意返回数值不带单位clientheight返回自身的高度（包含padding），内容区域的高度（不含边框）。注意返回数值不带单位

示例：输出元素上、左边框的大小，以及自身的宽度和高度

    <d鲁迅故居简介iv></div>    <style>        div {            width: 100px;            height: 100px;            background-color: aqua;            border: 3px solid yellow;        }    </style>    <script苏轼写过哪些诗>        //获取div元素        let div = document.querylector("div");        //输出元素左边框和上边框的大小        console.log("左边框的大小：", div.clientleft);        console.log("上边框的大小：", div.clienttop);        //输出元素自身宽度和高度（不含边框）        console.log("宽度为：", div.clientwidth);        console.log("高度为：", div.clientheight);    </script>

3 元素滚动scroll系列

scroll含义：scroll的含义是滚动，使用scroll系列的相关属性可以动态地获取该元素的滚动距离、大小等。

属性说明scrollleft返回被卷去的左侧距离，返回数值不带单位scrolltop返回被卷去的上方距离，返回数值不带单位scrollwidth返回自身的宽度，不含边框。注意返回数值不带单位scrollheight返回自身的高度，不含边框。注意返回数值不带单位

示例：获取自身的高度和宽度，获取div卷起来的高度

    <div>        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容    </div><br>    <button>点击获取卷起来的高度和宽度</button>    <style>        div {            width: 200px;            height: 100px;            background-color: pink;            /* 将放不下的元素滚动来显示 */            overflow: scroll;        }    </style>    <script>        //1、获取页面中的元素div和button        let div = document.querylector("div");        let button = document.querylector("button");        //2、输出自身的高度和宽度        console.log("高度为：", div.scrollheight);        console.log("宽度为：", div.scrollwidth);        //给按钮注册click点击事件，点击之后输出卷起来的高和宽        button.addeventlistener("click", function () {            console.log("卷起来的高度：", div.scrolltop);            console.log("卷起来的宽度：", div.scrollleft);        })    </script>

到此这篇关于javascript三种常用网页特效详解的文章就介绍到这了,更多相关javascript网页特效内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！