网站免费建站黄,重庆模板建站软件,大二网页设计作业成品,网站开发用原生在网页中移到元素div(或 ul li)#xff0c;常常需要获取元素div离屏幕上下左右的距离#xff0c;这样可以知道元素处在屏幕中的位置#xff0c;以控制元素的移动。获取元素div的长度或高度#xff0c;可以用 js 获取元素div的width或height属性得到#xff0c;但元素没有距…在网页中移到元素div(或 ul li)常常需要获取元素div离屏幕上下左右的距离这样可以知道元素处在屏幕中的位置以控制元素的移动。获取元素div的长度或高度可以用 js 获取元素div的width或height属性得到但元素没有距离屏幕上下左右的属性应该如何获取元素div(ul li)离屏幕上下左右边距离(长度)javascript 有一个用 getBoundingClientRect()方法这个方法有上下左右四个属性它们正是离幕上下左右边距离通过它可以获取到div(ul li)离屏幕上下左右边距离。js如何获取div(ul li)离屏幕上下左右边距离(长度)实例html代码js如何获取div(ul li)离屏幕上下左右边距离(长度)CSS代码.div{ margin:80px 0px; position:relative; border:1px solid #787878; width:500px; height:30px; line-height:30px;}javascript代码function getDivTopLength(obj) {var div document.getElementById(obj);var topLength div.getBoundingClientRect().top; //div离屏幕上边距离(长度)var bottomLength div.getBoundingClientRect().bottom; //div离屏幕下边距离(长度)var leftLength div.getBoundingClientRect().left; //div离屏幕左边距离(长度)var rightLength div.getBoundingClientRect().right; //div离屏幕右边距离(长度)return topLength topLength bottomLength bottomLength leftLength leftLength rightLength rightLength;}document.write(getDivTopLength(divId));输出结果topLength80bottomLength112leftLength8rightLength510由于CSS把 div 的位置定义为相对(position:relative)所以 div 在网页中的位置不同输出结果不一样。以上举例了求 div 离屏幕上下左右边距离js getDivTopLength方法把要求元素离屏幕上下左右边距离定义为参数所以只要把具体元素传递给它就能求出其离屏幕上下左右边距离因此求 ul li 离屏幕上下左右边距离只需把相应的 id 传给 getDivTopLength方法就可以求出。
