1、新建一个html文件。
2、在html页面上创建一个点击的button按钮。
3、为button添加点击时创建一个新的div事件。使用documentcreateElement("div")创建一个新的div，然后使用innerHTML对新建的div设置内容，最后把div放到<body>显示。
4、为button按钮添加点击是创建新div事件。
5、保存好html文件后使用浏览器打开，点击button按钮会执行已经写好的创建div的事件。
在 JS获取div高度的方法 中，整理了几个有关于获取div高度的方法，后来又遇到一个问题，怎么获取DIV在页面中的绝对位置，因此在这篇笔记中记录一下。
页面结构
样式
getBoundingClientRect用于获取某个元素 相对于视窗 的位置集合。集合中有top, right, bottom, left等属性。
offsetLeft指的是元素相对于 版面或 由 offsetParent 属性指定的 父坐标 的计算上侧位置，整型，单位像素。
借用这个思路，当我们想获取元素的绝对位置时，可以递归遍历，直到元素的父元素为body为止。
关于offsetParent属性，有以下几点Tips。
/
data:2022-11-17
author:lfp
move运动函数
dom--需要运动的对象
json--{width:100,height:100,left:100,top:100}
callback--回调函数 可调用自己 实现异步动画效果
/
//主函数
function move(dom,json,callback){
//让每一次动画都是新的开始，防止出现动画一直不停的运行
if(domtimer)clearInterval(domtimer);
var i=0;
var start=0;
//在对象中增加timer 便于控制他停止
domtimer=setInterval(function(){
i++;
//循环每一个目标属性添加动画方法
for(var attr in json){
//获取当前attr的属性值 已经去除了px 还有 如果初始值是auto 用零代替
var cur=getStyle(dom,attr);
if(i==1)start=cur;
//拿到该属性的目标值
var target=json[attr];
//设置分成10次增加增量 你可以根据需要修改
var speed=(target-start)/10;
consolelog(speed+"====="+cur)
//如果没有达到目标值就一直加
if(Mathabs(cur-target)>1){
domstyle[attr]=cur+speed+"px";
}else{
//达到目标值了就停止或者其他情况也停止
clearInterval(domtimer);
//等停止了动画再回调函数进行另外的 *** 作
if(callback)callbackcall(dom);
};
};
},45);
};
//配套函数
function getStyle(dom,attr){
var value="";
if(windowgetComputedStyle){
value=windowgetComputedStyle(dom,false)[attr];
}else{
value=domcurrentStyle[attr];
};
value=parseInt(value);
return value || 0;//如果你再样式中没有设置初始的值就会出现NaN 所以要用0来补充
};
function $(id){
//return documentgetElementById(id);
return documentquerySelector("#"+id);
};
以上就是关于如何用js 获取一个div的坐标全部的内容，包括:如何用js 获取一个div的坐标、原生JS获取页面中DIV绝对位置的方法、js实现匀速下落动画怎么实现等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）