JavaScript（网页特效）

最新推荐文章于 2024-08-26 12:44:02 发布

Han_Zhou_Z

最新推荐文章于 2024-08-26 12:44:02 发布

阅读量846

点赞数 2

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/Han_Zhou_Z/article/details/121862398

版权

一、元素偏移量offset系列

1、offset概述

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

offsetLeft	返回元素相对其带有定位的父元素左边框的偏移
offsetTop	返回元素相对其带有定位的元素上方的偏移父
offsetWidth	返回自身的宽度（包括padding、边框和内容区域的宽度）。注意返回数值不带单位
offsetHeight	返回自身的高度（包括padding、边框和内容区域的高度）。注意返回数值不带单位
offsetParent	返回作为该元素带有定位元素的父级元素（如果父级都没有定位则返回body）

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

（3）案例：获取鼠标指针在盒子内的坐标。

<style>
    #box{
        background-color: pink;
        position: absolute;
        left: 50px;
        top: 20px;
        width: 200px;
        height: 200px;
    }
</style>
<body>
    <div id="box"></div>
    <script>
        var box = document.querySelector('#box');
        //1、输出盒子box的宽度和高度
        console.log('宽度：',box.offsetWidth);
        console.log('高度：',box.offsetHeight);
        //2、给盒子box绑定鼠标移动的事件
        box.addEventListener('mousemove',function(e){
            //2.1先获取盒子的左右偏移量
            var left = box.offsetLeft;
            var top = box.offsetTop;
            console.log('偏移量('+left+','+top+')');

            //2.2计算鼠标指针在box中的坐标
            var x = e.pageX - left;
            var y = e.pageY - top;
            console.log("x舟的坐标:"+x+","+'y舟的坐标:'+y)
        })
    </script>
</body>

效果示意图

注意：代码中的大小写要注意区分

2、offset与style的区别

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

二、元素可视区client系列

1、client概述

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

clientLeft	返回元素左边框的大小
clientTop	返回元素上边框的大小
clientWidth	返回自身的宽度（包含padding），内容区域的宽度（不含边框）。注意返回数值不带单位
clientHeight	返回自身的高度（包含padding），内容区域的高度（不含边框）。注意返回数值不带单位

<div>我是内容．．．</div>
<style>．．．（省略了样式代码）</style>
<script>
  var div = document.querySelector('div');
  console.log(div.clientHeight);console.log(div.clientTop);
  console.log(div.clientLeft);
</script>

三、元素滚动scroll系列

1、scroll概述

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

scrollLeft	返回被卷去的左侧距离，返回数值不带单位
scrollTop	返回被卷去的上方距离，返回数值不带单位
scrollWidth	返回自身的宽度，不含边框。注意返回数值不带单位
scrollHeight	返回自身的高度，不含边框。注意返回数值不带单位

<div>我是内容…（省略重复内容）</div>
<script>
  var div = document.querySelector('div');
  console.log(div.scrollHeight);
</script>

Han_Zhou_Z

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫